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>
网友评论