13-Vue自定义组件

当子组件需要向父组件传递数据时，就要用到自定义组件。

父组件也可以直接在子组件的自定义标签上使用v-once来监听子组件触发的自定义事件。

<div id="app">

<p>总数：{{total}}</p>

<my-component @increase="handleGetTotal"

                           @reduce="handleGetTotal"></my-component>

</div>

<script>

Vue.component("my-component",{

template:`<div>

<button @click="handleIncrease">+1</button>

<button @click="handleReduce">-1</button>

</div>`,

data(){

return{

counter:0

}

},

methods:{

handleIncrease(){

this.counter++;

this.$emit("increase",this.counter)

},

handleReduce(){

this.counter--;

this.$emit("reduce",this.counter)

}

}

});

new Vue({

el:"#app",

data:{

counter:0

},

methods:{

handleGetTotal(total){

this.total = total

}

}

})

</script>

个人理解：

<my-component>组件渲染的两个button，当点击第一个button时触发绑定的click事件同时触发函数handleIncrease，函数实现内部的counter++操作，并将加之后的值作为名字是increase的值传给父级，@increase，即点击第一个button的的时候执行handleIncrease函数传完值之后立刻执行父级的@increase="handleGetTotal"，执行handleGetTotal函数，用function接收传入的this.counter作为total值，this.total = total传给父级total，最后p标签调用的就是这个值。

转载于:https://www.cnblogs.com/Romantic-Blood/p/11094540.html