子父通信

1 <div id="app">
2         <p>接受数： {{msg}}</p>
3         <three-child v-on:send-msg="getMsg"></three-child>
4     </div>

 1 <script src="./js/vue.global.min.js"></script>
 2     <script>
 3         const app = Vue.createApp({
 4             data() {
 5                 return {
 6                     count: 100,
 7                     flag: false,
 8                     msg: ''
 9                 }
10             },
11             methods: {
12                 getMsg(data) {
13                     console.log(data);
14                     this.msg = data;
15                 }
16             }
17         })
18 
19         const ThreeChild = {
20             data() {
21                 return {
22                     val: '子组件的内容'
23                 }
24             },
25             template: `
26                 <p @click='send'>最后一个个子组件 === </p>              
27             `,
28             emits: [send - msg],
29             methods: {
30                 send() {
31                     this.$emit('send-msg', this.val)
32                 }
33             }
34         }
35 
36         app.component('ThreeChild', ThreeChild)
37 
38         app.mount('#app')
39     </script>

标签：子父,methods,app,通信,send,ThreeChild,msg,data
来源： https://www.cnblogs.com/szsy/p/16465430.html