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
 }
}