我把這個實例分為幾個步驟解讀：
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中在父組件點擊按鈕觸發子組件的事件的文章就介紹到這了,更多相關vue 父組件觸發子組件內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/ZiChen_Jiang/article/details/109266736
