vue的经典案例
script标签引入vuejs中使用
<div id="counter-event-example">
<p>{{ total }}</p>
<v-counter v-on:counter="inscTotal"></v-counter>
</div>
<script>
// child componemt
Vue.component('button-counter', {
template: '<button @touchstart="emitParentCounter">向父组件通信</button>',
methods: {
emitParentCounter() {
this.$emit('counter')
}
},
})
// parent componemt
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
inscTotal: function () {
this.total += 1
}
}
})
</script>
上面带面，看到父组件的html中v-on:counter="inscTotal"将inscTotal这方法绑定在一个自定义事件counter中，然后在子组件的script中的emitParentCounter方法，看到有这一段this.$emit('counter')，这一段就是用来触发父组件html中绑定的counter事件，一旦触发，就会调用父组件中的inscTotal方法，到此完成一个子组件想父组件通讯的行为。
子组件向父组件通信，通过在父组件的html中的子组件标签上绑定“自定义事件”监听子组件的动作，子组件则是在其script中使用 this.$emit('Event Name') 发信号给父组件，并且可以发送参数到父组件。
组件中使用
// parent component
<template>
<div class="parent">
<p>{{ text }}</p>
<v-child @acceptMsg="updateMsg">
</div>
</template>
<script>
export default {
methods: {
updateMsg(text){
this.text = text
}
},
data() {
return {
send: {
text: 'init data...'
}
}
}
}
</script>
// child component
<template>
<div class="parent">
<button @touchstart="sendMsg"></button>
</div>
</template>
<script>
export default {
methods: {
sendMsg(){
this.$emit('acceptMsg', 'i come from child-accept')
}
}
}
</script>
