今天,来看下组件,首先,我们先直接来看一个例子、
<body>
<div id="app">
<!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
// 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
</script>
Vue.extend:这个方法就是创建一个未挂载的实例,而我们这里往他选项对象里,写了一个template也就是组件模板。然后用 Vue.component('my-component', myComponent),注册组件,第一个参数为组件标签,第二个参数为组件名称,我们是直接在实例之外注册的,这被称为全局组件,它的作用域为全局,在任何一个实例上都可用。
<body>
<div id="app">
<!-- 3. my-component只能在#app下使用-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
new Vue({
el: '#app',
components: {
// 2. 将myComponent组件注册到Vue实例下
'my-component' : myComponent
}
});
</script>
这是我们注册的局部组件,同样也是使用组件构造器的方式因为它是在Vue这个实例中注册的,在其他的el元素挂载点会失效。
接下来,来讲一下语法糖,原来啊,Vue官方觉得以上面这种方式创建组件太过于麻烦,于是,允许我们用 Vue.component('my-component',{
template: '<div>This is my first component!</div>'
});的方式来快捷创建组件。
<body>
<div id="app">
<!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('my-component',{
template: '<div>This is my first component!</div>'
});
new Vue({
el: '#app'
});
</script>
再来看看一些特殊情况;
比如说,Vue组件的模板在某些情况下会受到HTML的限制,比如说,<table>标签下只能是<tr>,<td>之类的,我们可使用is属性来挂载组件;例子如下:
<body>
<div id="app">
<!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
<table>
<tbody is="my-component">
</table>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('my-component',{
template: '<div>This is my first component!</div>'
});
new Vue({
el: '#app'
});
</script>
再一个;
在组件中像其他VUE实例那样,使用选项对象时,注意,data的类型必须是函数,且有返回值;
Vue.component('my-component',{
templated:'<div>{{msg}}</div>',
data:function(){
return {
msg:'组件内容'
}
}