组件
Vue.component()
这里有一个 Vue 组件的示例:
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>
,即Vue.component()的第一个参数。我们可以在一个通过 new Vue
创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
<div id="components-demo">
<button-counter></button-counter>
</div>
//注册组件
new Vue({ el: '#components-demo' })
组件构造器
Vue.extend()
extend创建的是一个组件构造器,而不是一个具体的组件实例,所以直接使用无法生效
组件构造器相当于Vue.component()方法的第二个参数部分
使组件构造器生效的常用方式有如下两种:
- 注册
<div id="author"></div>
// 创建构造器
var au = Vue.extend({
template: "<p><a :href='url'>{{ author }}</a></p>",
data : function() {
return {
author : 'Li',
url : 'http://www.baidu.com'
}
}
});
// 创建组件
Vue.component('au',au);
// 注册
new Vue({
el:"#author"
})
- 挂载
<div id="author"></div>
// 创建构造器
var au = Vue.extend({
template: "<p><a :href='url'>{{ author }}</a></p>",
data : function() {
return {
author : 'Li',
url : 'http://www.baidu.com'
}
}
});
// 创建au实例并挂载到一个元素上
new au().$mount('#author');
组件传递参数
了解了组件和组件构造器的关系,此时应当关心如何给组件传递参数
使用props
<div id="author"></div>
var au = Vue.extend({
template: "<p><a :href='url'>{{ author }} & {{ name }}</a></p>",
data : function() {
return {
author : 'Li',
url : 'http://www.baidu.com'
}
},
props : ['name']
});
//使用propsData传递参数name
new au({propsData: {name : 'cj'}}).$mount('#author');