注意:组件是vue.js的核心部分。组件必须得在实例化中的模板中使用。。如果选择注册一个全局组件,组件注册必须要在他的根实例化之前注册,一个组件可以对应多个根实例,根实例也可以对应多个组件。
关于组件的全局注册
(注意:组件的注册必须要在根实例化之前,否则会出错,而无法使用。)结合以下代码,实例#app就是my-test的根实例。。。
<!--app实例模板-->
<div id="app">
//(图一)看看下面两个分别在实例化前后注册的组件的显示情况
<my-test></my-test>
<!--<my-last></my-last>-->
</div>
<!--(图二)test实例模板-->
<div id="test">
<my-last></my-last>
<my-test></my-test>
</div>
<script>
//1、在vue实例化之前组册组件my-test
Vue.component('my-test',{
template: '<h2>啊哈哈,我是新注册的组件呀!!</h2>'
});
//2、初始化一个实例
var v = new Vue({
el: '#app'
})
//3、如果在vue实例化之后注册一个组件my-last
Vue.component('my-last',{
template: '<h3>你说组件我能显示不?</h3>'
});
//4、另初始化一个实例,在my-last之后进行初始化
let vm = new Vue({
el: '#test'
});
</script>
下面是代码效果图(从下可以看出,在实例化之后注册的组件my-last出错了。)
关于组件的局部注册
全局方式注册的组件,可以在其注册之后才初始化的所有实例模板内应用,但是有时候这并不是必须的,
有的其实只是为了在某个特定的实例模板中应用,在这种情况下,我们可以采用局部注册组件的方法。
<div id="test">
<my-second></my-second>
</div>
<script>
let Child = {
template: '<div>我只是一个局部注册的组件啦</div>'
};
let vm = new Vue({
el: '#test',
components: {
'my-second': Child
}
});
</script>
当使用DOM作为模板时需要注意的事项
使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上时,
<table>、<tr>、<ul>、<ol>、<select> 这些元素对所包含的元素有限制,而<option>只能出现在特定的元素里面。。那么直接在里面应用组件可能会出现无法识别的情况,这时我们就可以使用is这个特殊的属性
<div id="test">
<table>
<tr>
<td>hahah</td>
<td is="my-second"></td>
<my-second></my-second>
</tr>
</table>
</div>
let Child = {
template: '<div>我只是一个局部注册的组件啦</div>'
};
let vm = new Vue({
el: '#test',
components: {
'my-second': Child
}
});
注意:在实例中传入的各种选项大多也可以在组件中传入,唯一不同的就是data必须是函数。。。。