最近在學習Vue父子組件通信的問題,剛好遇到一個父子之間事件事件派發與接收,在這裏記錄一下,在這裏我使用的是ref
給子組件註冊引用信息。官網是這樣解釋的
ref
被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子組件上,引用就指向組件實例:
父組件app.vue
<template>
<div id="app">
<!--父組件-->
<input v-model="msg">
<button v-on:click="notify">廣播事件</button>
<!--子組件-->
<popup ref="child" ></popup>
</div>
</template>
<script>
import popup from '@/components/popup'
export default {
name: 'app',
data: function () {
return {
msg: ''
}
},
components: {
popup
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$refs.child.parentMsg(this.msg)
}
}
}
}
</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>
子組件popup.vue
<template>
<div>
<ul>
<li v-for="item in messages">父組件輸入了:{{item}}</li>
</ul>
</div>
</template>
<style>
body {
background-color: #ffffff;
}
</style>
<script>
export default{
name: 'popup',
data: function () {
return {
messages: []
}
},
methods: {
parentMsg: function (msg) {
this.messages.push(msg)
}
}
}
</script>
我把這個實例分爲幾個步驟解讀:
1、父組件的button元素綁定click事件,該事件指向notify
方法
2、給子組件註冊一個ref="child"
3、父組件的notify
的方法在處理時,使用了$refs.child
把事件傳遞給子組件的parentMsg
方法,同時攜帶着父組件中的參數msg
4、子組件接收到父組件的事件後,調用了parentMsg
方法,把接收到的msg
放到message
數組中
運行結果如下:
更多關於vue的學習可以來我的博客:
綜合知識博客
git.boggeng.com