一、组件化开发思想
不同的功能封装到不同的组件中,组件能够专业分工,重复使用,拼装组合。
二、组件注册
全局组件注册与使用
Vue.component(组件名称, {
data: 组件数据,
template: 组件模板内容
})
<组件名称></组件名称>
示例:点击后,显示累计的点击次数
<div id="app">
<!-- 2使用 -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 1注册
Vue.component('button-counter', {
data: function(){
return {
count: 0
}
},
template: '<button @click="handle">点击了{
{count}}次</button>',
methods: {
handle: function(){
this.count += 2;
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
- 组件参数的data值必须是函数
2. 组件模板必须是单个根元素
3. 组件模板的内容可以是模板字符串
template: `
<div>
<button @click="handle">点击了{
{count}}次</button>
<button>测试123</button>
</div>
`,
写到反引号里,可以更规范的写标签,不用写成一长串。
4. 组件命名方式,尽量用短横线,用驼峰命名,使用时也得是短横线。
最好就别用驼峰命名组件了
Vue.component('HelloWorld', ....... });
<hello-world></hello-world>
局部组件注册与使用
注册
Vue.component('test-com',{
template: '<div>Test<hello-world></hello-world></div>'
});
var HelloWorld = {
data: function(){
return {
msg: 'HelloWorld'
}
},
template: '<div>{
{msg}}</div>'
};
var HelloTom = {
data: function(){
return {
msg: 'HelloTom'
}
},
template: '<div>{
{msg}}</div>'
};
var vm = new Vue({
el: '#app',
data: {
},
components: {
'hello-world': HelloWorld,
'hello-tom': HelloTom
}
});
使用
局部组件只能在注册他的父组件中使用
<div id="app">
<hello-world></hello-world>
<hello-tom></hello-tom>
</div>