vue教程4：自定义组件的使用
概述
-
组件是一个可复用的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接收
