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

大概就是这样啦~

每天一个小知识点，加油！