vue 中父子组件之间的通信 props 和 $emit 方法

1. 通过 props 将数据从父组件传递给子组件：父组件可以向子组件传递数据，只需要在子组件上使用 props 属性声明要接收的属性即可。例如：

   <!-- 父组件 -->
   <template>
     <div>
       <my-child :text="parent"></my-child>
     </div>
   </template>
   
   <script>
   import MyChild from './MyChild.vue'
   
   export default {
     components: {
       MyChild
     },
     data() {
       return {
         parent: 'Hello, World!'
       }
     }
   }
   </script>
   
   <!-- 子组件 -->
   <template>
     <div>
       <p>{{ text }}</p>
     </div>
   </template>
   
   <script>
   export default {
     props: {
       text: String
     }
   }
   </script>
   

   
   在这个例子中，父组件通过向子组件传递 parent 数据，子组件使用 props 属性声明要接收的属性，并将它显示在页面上。

2. 通过 $emit 方法将事件从子组件传递给父组件：子组件可以向父组件发送事件，只需要在子组件中使用 $emit 方法触发一个自定义事件，并在父组件上使用 v-on 监听该事件即可。例如：

   <!-- 父组件 -->
   <template>
     <div>
       <my-child @myEvent="handleMyEvent"></my-child>
     </div>
   </template>
   
   <script>
   import MyChild from './MyChild.vue'
   
   export default {
     components: {
       MyChild
     },
     methods: {
       handleMyEvent(data) {
         console.log('子组件触发了myEvent事件，参数为 ' + data)
       }
     }
   }
   </script>
   
   <!-- 子组件 -->
   <template>
     <div>
       <button @click="handleClick">点击触发 myEvent 事件</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       handleClick() {
         this.$emit('myEvent', 'Hello, World!')
       }
     }
   }
   </script>
   

   子组件通过 $emit 方法触发一个自定义事件 myEvent，并传递一个字符串参数。父组件使用 v-on 监听该事件，并在处理函数中获取子组件传递的参数。