恰逢周末休息了两天,所以没有更新,各位莫怪,今天周一又开始努力学习Vue了!今天学的是Vue组件,干就完了,奥利给!!
Vue.component('button-counter', {
data: function(){
return {
count: 0
}
},
template: '',
methods: {
handle: function(){
this.count += 2;
}
}
})
注意:全局组件注册后,任何vue实例都可以使用
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
注意:全局组件可多次复用,组件之间相互独立
1. data必须是一个函数
2. 组件模板内容必须是单个根元素
3. 组件模板内容可以是模板字符串
4. 如果使用驼峰式( MyComponent )命名组件,只能在字符串模板中使用
5. 在普通的标签模板中,必须使用短横线( my-component )的方式使用组件
可以在vue实例中的components属性中注册局部组件
局部组件注册后只能在当前注册它的vue实例中使用
<script>
// 定义组件的模板
var Child = {
template: 'A custom component!'
}
new Vue({
//局部注册组件
components: {
// 将只在父模板可用 一定要在实例上注册了才能在html文件中使用
'my-component': Child
}
})
</script>
<div id="app">
<my-component></my-component>
</div>
Vue.component('menu-item', {
props: ['title', 'content'],
data: function() {
return {
msg: '子组件本身的数据'
}
},
template: '{{msg + "----" + title + "-----" + content}}'
});
<menu-item title='来自父组件的值'></menu-item>
<menu-item :title='ptitle' content='hello'></menu-item>
在props中使用驼峰形式,模板中需要使用短横线的形式
字符串形式的模板中没有这个限制
字符串 String
数值 Number
布尔值 Boolean
数组 Array
对象 Object
注意:子组件用 $emit() 触发事件,$emit() 第一个参数为 自定义的事件名称,第二个参数为需要传递的数据
<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>
handle: function(val){
// 扩大字体大小
this.fontSize += val;
}
非父子组件之间传递数据需要借助于事件中心,通过事件中心传递数据
提供事件中心:var hub = new Vue();
传递数据方:通过一个事件触发hub.$emit(方法名,传递的数据)
接收数据方:通过mounted(){} 钩子中 触发hub.$on()方法名
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
TOM:{{num}}
`,
methods: {
handle: function(){
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 监听事件
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
销毁事件:通过hub.$off()方法名销毁之后无法进行传递数据:hub.$off('tom-event');
组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力
组件插槽就是父组件给子组件传递内容
Vue.component('alert-box', {
template: `
ERROR:
默认内容
`
});
这里的所有组件标签中嵌套的内容会替换掉子组件中的slot,如果不传值则使用 slot 中的默认值
<div id="app">
<alert-box>有bug发生</alert-box>
<alert-box>有一个警告</alert-box>
<alert-box></alert-box>
</div>
使用slot中的 "name" 属性绑定元素 指定当前插槽的名字
应用场景:父组件对子组件加工处理,既可以复用子组件的slot,又可以使slot内容不一致
组件是Vue中非常重要的语法,有点像后端的api,在项目中使用组件可以增加代码的可读性和逻辑性,值得学习!