vue中父传子，子传父 怎么相互传值（个人理解）

父传子：

子组件使用props接收父组件的值

父组件(test.vue)：

   <template>
  <!-- 父传子 -->
 <div class="container">
    父组件:<input type="text" v-model="value">
    <!-- 引入子组件 -->
    <com-b :zhangsan="value"></com-b>
 </div>
</template>

<script>
import comB from '@/components/com-b'
export default {
 data() {
  return {
    value:''
  }
 },
 methods:{
   
 },
 components: {
   comB
 }
}
</script>

子组件(com-b.vue)在component文件夹中创建：

<template>
 <div class="container">
   <!-- 这是子组件 -->
   <div>{{zhangsan}}</div>
 </div>
</template>

<script>
export default {
 data() {
  return {
  }
 },
 props:['zhangsan'],
 methods:{
   
 },
}
</script>

子传父：

子传父需要事件触发

子组件(com-b.vue)在component文件夹中创建：

<template>
 <div class="container">
   <!-- 这是子组件 -->
   <!-- 点击按钮后将自组件的数据传给父组件 -->
　　{{msg}}
   <button @click="ClickEvent()">点击自组件发送数据给父组件</button>
 </div>
</template>

<script>
export default {
 data() {
  return {
    msg:'我是自组件数据'
  }
 },
 methods:{
   //点击事件
   ClickEvent(){
     //this.$emit('监听事件','要传递的值')
     this.$emit('listenEvent',this.msg)
   }
 },
}
</script>

父组件(test.vue)：

  <!-- 子传父 -->
　<template>
 <div class="container">
　　<!-- 引入自组件-->
   <!-- 在父组件中使用传递的事件进行监听，回调函数fn -->
   <!-- 事件可以自定义，回调函数也可以自定义 -->
　　<com-b @listenEvent="fn"></com-b>
   {{value}}
 </div>
</template>

<script>
import comB from '@/components/com-b'
export default {
 data() {
  return {
    value:''
  }
 },
 methods:{
　　//函数接收一个参数，这个参数就是子组件传递的参数
   fn(data){
     this.value=data
     console.log(data)
   }
 },
 components: {
   comB
 }
}