浅析Vue单文件组件与非单文件组件使用方法
短信预约 -IT技能 免费直播动态提醒
单文件组件：一个文件中只包含一个组件，后缀为.vue（常用）
<template>
<!-- html部分 -->
<div>
<p class="title">{{name}}</p>
</div>
</template>
<script>
// js部分
export default {
data() {
return {
title: '这是标题'
}
}
}
</script>
<style>
.title {
font-size: 24px;
color: orange;
}
</style>
非单文件组件：一个文件中包含有多个组件，后缀为.html
在非单文件组件中“定义、注册、使用”组件
【下例中将header-com注册为局部组件、footer-com注册为全局组件】
<div id="root">
<!-- 使用局部组件 -->
<header-com></header-com>
<!-- 使用全局组件 -->
<footer-com></footer-com>
</div>
// 定义组件
const header = Vue.extend({
template: `
<div id="header-container">
{{title}}
</div>
`,
data() {
return {
title: '这是标题'
}
}
});
// 定义组件
const footer = Vue.extend({
template: `
<div id="footer-container">
{{title}}
</div>
`,
data() {
return {
title: '这是底部'
}
}
});
// 注册全局组件
Vue.component('footer-com', footer);
new Vue({
el: '#root',
// 注册局部组件
components: {
'header-com': header
}
});
注意事项
① 组件中不能添加el配置项，只需在根vm中配置，因为所有的组件最终都被一个vm管理（vue只有一个老大）
② 组件中使用name配置项修改组件在开发者工具中展示的名字
③ 组件实际是一个VueComponent构造函数，在每次使用组件的时候都会实例化一个组件对象。
④ 重要的内置关系：VueComponent.prototype.proto === Vue.prototype，目的是让组件能访问到根vm上的属性和方法。
到此这篇关于浅析Vue单文件组件与非单文件组件使用方法的文章就介绍到这了,更多相关Vue单文件组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
