我把這個實例分為幾個步驟解讀：
1、父組件的button元素綁定click事件,該事件指向notify方法
2、給子組件注冊一個ref=“child”
3、父組件的notify的方法在處理時，使用了$refs.child把事件傳遞給子組件的parentMsg方法，同時攜帶著父組件中的參數msg
4、子組件接收到父組件的事件后，調用了parentMsg方法，把接收到的msg放到message數組中
父組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<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> |
子組件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<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> |
到此這篇關于詳解vue中在父組件點擊按鈕觸發(fā)子組件的事件的文章就介紹到這了,更多相關vue 父組件觸發(fā)子組件內容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/ZiChen_Jiang/article/details/109266736
