概述
- 组件是一个可复用的vue实例
- 组件通过Vue.component(组件名称, 配置)进行注册
- 组件的data必须是返回json对象的函数,这样组件复用时每个对象都有各自的属性实例
- 通过template定义组件的组成内容
简单Demo:
<body>
<div id="components-demo">
<button-counter></button-counter>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('button-counter',{
data:function(){
return {
count: 0
}
},
template:'<button v-on:click="count++">点击了{{count}}次</button>'
})
new Vue({
el: '#components-demo'
})
</script>
效果如下,每点击1次自动加1:
props
- HTML页面引用的组件,可以设置各种属性值,vue组件通过
props属性接收数据
<body>
<div id="components-demo">
<!--如下,分别定义了title属性值-->
<button-counter title="按钮1"></button-counter>
<button-counter title="按钮2"></button-counter>
<button-counter title="按钮3"></button-counter>
</div>
</body>
Vue.component('button-counter',{
props: ['title'], //接收title属性
template:'<button>{{title}}</button>' //使用props定义的属性
})
效果:
props动态传值
上面的demo是通过html写死title传值,实际数据可能是动态的,把上面的例子稍作修改:
<button-counter
v-for="buttonText in buttonList"
v-bind:title="buttonText">
</button-counter>
new Vue({
el: '#components-demo',
data:{
buttonList:['按钮1','按钮2','按钮3']
}
})
自定义事件
- 当我们需要在操作自定义组件后,引起组件外的元素变化,就需要用到自定义事件。即:父组件先声明事件,然后子组件操作后触发父组件事件。
- 需求:仍然以上面的demo为例,增加个文本,显示当前点击的是哪个按钮。
<body>
<div id="components-demo">
<p>
点前点击按钮:{{ buttonText }}
</p>
<my-button
v-for="button in buttonList"
v-bind:title="button"
v-on:show-text="buttonText=$event"></my-button>
</div>
</body>
- show-text:自定义事件名
- $event:接收子组件外传的参数值,固定就是
$event
<script>
Vue.component('my-button',{
props: ['title'],
template: `
<button v-on:click="$emit('show-text',title)">{{title}}</button>
`
})
new Vue({
el: '#components-demo',
data:{
buttonText: '',
buttonList:['按钮1','按钮2','按钮3']
}
})
</script>
- $emit:用来触发事件,第一个参数是触发的事件名,第二个参数是需要抛出的数据,父组件通过 $event接收