组件注册和组件使用的注意事项
2018-08-29 本文已影响0人
苦瓜_6
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
组件是可复用的 Vue 实例,顾名思义,组件可以提高代码的复用性。
组件注册
全局注册
Vue.component('组件名',options)
<div id="app">
<!-- 使用组件 -->
<my-first-component></my-first-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局注册一个名字为 'my-first-component' 的组件
Vue.component('my-first-component',{
data: function(){ // data必须是函数
return {
count: 0
}
},
template: '<div>我是组件的内容</div>'
// template会替代html 中的 ‘<my-first-component></my-first-component>’
});
let app = new Vue({
el: '#app'
})
</script>
全局注册的优点在于所有的Vue实例都可以用,缺点在于权限太大,容错率降低(类似于JavaScript中的全局变量和局部变量)。
局部注册
<div id="app">
<!-- 使用组件 -->
<my-second-component></my-second-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let componentB = {
template: '<div>我是一个局部组件</div>',
data: function(){
return { }
}
}
let app = new Vue({
el: '#app',
components: {
'my-second-component': componentB
}
// 局部注册一个名字为 'my-second-component' 的组件
})
</script>
解析DOM模板的注意事项
vue组件的模板在某些情况下会受到html标签的限制,详细的内容可以查看文档中对于 解析 DOM 模板时的注意事项 的解释。
比如 <table> 中只能还有 <tr> , <td> 这些元素,所以直接在table中使用组件是无效的,此时可以使用is属性来挂载组件
<table>
<tr is="my-component"></tr>
</table>
组件使用的注意事项
组件命名
有多个单词时,推荐 使用 kebab-case (短横线分隔命名) ,字母全小写且必须包含一个连字符。
template
template中的内容必须被一个DOM元素包裹 ,也可以嵌套(每个组件必须只有一个根元素)。
下面这两种都是错误的写法:
template: '我是组件内容'
template: '<div>我是组件内容一</div><div>我是其他内容一</div>'
正确的写法应该是这样:
template: '<div>我是一个局部组件</div>'
// 或者
template: '<div>我是一个局部组件 <p>实在不知道写什么</p></div>'
data必须是一个函数
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝
<div id="app">
<my-component></my-component>
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let component = {
template: '<button v-on:click= "count++"> 点击了{{ count }}次</button>',
data: function(){
return {
count: 0
}
}
}
let app = new Vue({
el: '#app',
components: {
'my-component': component
}
// 局部注册一个名字为 'my-component' 的组件
})
</script>