this.total=total;
console.log('ParentComponent total:',total);
}
}
}
</script>
// ChildComponent 子组件
<template>
<div class="child-component">
<h2>这是一个子组件</h2>
<h3>{{parentMessage}}</h3>
<button @click="handleAdd10">+10按钮</button>
</div>
</template>
<script>
export default {
name: "ChildComponent",
props:["parentMessage","total"],
methods:{
handleAdd10(){
let total=this.total+10;
console.log('ChildComponent $emit:');
this.$emit('handleAdd10',total);
}
}
}
</script>
结果：
上面例子中，子组件有一个按钮，实现加10的效果，子组件通过props项来接收父组件传入的total值，在改变total后，通过$emit把它传给父组件，父组件定义事件@handleAdd10方法，子组件$emit()方法第一个参数是自定义事件的名称，后面的参数是要传的数据，对应的父组件通过getTotal(total)来接收子组件传递的数据，由此子组件到父组件通信完成。
3.表单子组件到父组件通过v-model来通信(语法糖)
// ParentComponent 改动如下
**
<h2>这是一个父组件total:{{total}}</h2>
<ChildComponent :parentMessage="parentMessage" :total="total" @handleAdd10="getTotal"/>
<InputComponent v-model="total"/>
**
<script>
import InputComponent from './InputComponent'
</script>
**
// InputComponent 子组件
<template>
<input type="text" @input="updateValue($event)">
</template>
<script>
export default {
name: "InputComponent",
methods:{
updateValue(evt){
this.$emit('input',evt.target.value)
}
}
}
</script>结果如下：
以上示例中：因为子组件的石建明是特殊的input，在使用组件的父级，可以通过v-model来绑定数据total，这种实现方式也可以称作语法糖，大大减少了父组件代码量。
4.非父子组件通过中央事件总线(bus)来通信
在vue.js2.x中推荐使用一个空的Vue实例作为中央事件总线（bus）,先看一个例子：
// ParentComponent 父组件
<template>
<div class="parent-component">
{{message}}
<br>
<br>
<component-a/>
</div>
</template><script>
import Vue from 'vue'
