每个Vue实例都是一个事件触发器：
- $on()——监听事件。
- $emit()——把事件沿着作用域链向上派送。（触发事件）
- $dispatch()——派发事件，事件沿着父链冒泡。
- $broadcast()——广播事件，事件向下传导给所有的后代。
父子组件之间的访问
- 父组件访问子组件：使用$children或$refs
- 子组件访问父组件：使用$parent
- 子组件访问根组件：使用$root
父组件 App.vue:
<template>
<div id="app">
<child message="hello" ref="hello"></child>
<child v-bind:message="msg" v-on:listenToChildEvent="showMsgFromChild"></child>
<br/>
<button @click="showChildComponentData">显示子组件的数据</button>
</div>
</template>
<script>
import child from './components/Child'
export default {
name: 'app',
data() {
return {
msg: "Hello, child!"
}
},
methods: {
showMsgFromChild( data ) {
alert( data );
},
showChildComponentData() {
console.log( this.$refs.hello );
alert( this.$refs.hello.msg );
alert( this.$refs.hello.message );
}
},
components: {
child
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子组件 Child.vue:
<template>
<div>
<h2>child子组件部份</h2>
<p>{{message}}</p>
<button type="button" name="button" v-on:click="sendMsgToParent">向父组件传值</button>
<br>
<button type="button" name="button" @click="showParentMsg">显示父组件信息</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "在父组件（App.vue）通过 $ref 调用"
}
},
props: [ 'message' ],
methods: {
sendMsgToParent() {
this.$emit( "listenToChildEvent", "this message is from child!" );
},
showParentMsg() {
console.log( this.$parent );
alert( this.$parent.msg );
}
}
}
</script>
<style>
</style>
