vue子組件如何修改父組件中的變量

今天在模擬小面試的時候，面試官提問了一個問題 是除了用子傳父的方式 還有那種方式可以讓子組件修改父組件中的變量，當時想的是 所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定prop 都使得其父子 prop 之間形成了一個單向下行綁定，子組件除了向父組件通過 $emit派發事件 是不能改變父組件中的數據的 后來查了查相關資料 發現在給子組件傳數據是加.sync這個修飾符可以修改！

首先是最常見的子傳父

子：this.$emit('自定義事件名稱', 數據) 
在父組件引用子組件的標簽上綁定@自定義事件名稱='回調函數'
父：methods: { 回調函數() {//邏輯處理  }  }

具體代碼這里就不演示了

.sync

父組件

 <template>
 <div class="home">
<child  :titleSync.sync="title"/>    
<span>{{ '我是父組件：' + title}}</span>
    </div>
  </template>

  <script>
  import Child from '../components/Child'

  export default {
    name: 'home',
    components: {
      Child,
    },
    data() {
      return {
        title: 'sync修飾符',
      }
    }
  }
  </script>

子組件

  `<template>
    <div>
 -----------------Child------------------

 <input type="text" v-model="config">

    </div>
  </template>

  <script>
  export default {
      name: 'Child',
      props: {
        titleSync: String,
      },
      computed: {
        config: {
          get() {
            return this.titleSync
          },
          set(val) {
            this.$emit('update:titleSync', val)
          }
         }
      }
  }
  </script>`

大概就是這樣啦~
每天一個小知識點，加油！