I divide this example into several steps ：
1, Of the parent component button Element binding click event , The event points to notify method
2, Register a ref=“child”
3, Of the parent component notify When dealing with , Used $refs.child Passing events to the parentMsg method , It also carries the parameters in the parent component msg
4, After receiving the parent component event , Called parentMsg method , Send the received msg put to message Array
Parent component
<template> <div id="app"> <!-- Parent component --> <input v-model="msg" /> <button v-on:click
="notify"> Broadcast events </button> <!-- Subcomponents --> <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>
Subcomponents
<template> <div> <ul> <li v-for="item in messages"> The parent component entered ：{{ 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>
Technology