Vue父子组件数据双向绑定

Vue父子组件数据双向绑定

最近没有写新项目，天天看零零碎碎的博客，感觉还没啥进步。前些天更新版本的时候发现双向绑定的知识点都忘了，赶紧记下来！

• 所有的 prop 都使得其父子之间形成了一个单向下行绑定，父级 prop 的更新会向下流动到子组件中，但是反过来则不行
• 2.3.0+ 新增 .sync 修饰符，以 update:my-prop-name 的模式触发事件实现上行绑定，最终实现双向绑定

上代码

父组件内容：

<child-compoment :fatherValue="value"></child-compoment>

<template>
  <div>
  	value：{{value}}
    <child :fatherValue.sync="value" ></child>
  </div>
</template>
<script>
import ChildCompoment from './ChildCompoment'  //引入Child子组件
export default {
  components: { ChildCompoment },
  data() {
    return {
      value: ''
    }
  }
}
</script>

子组件内容：

<template>
  <div>
      <button @click="handler">click</button>
  </div>
</template>

<script>

export default {
  props: {
    fatherValue: {
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {
  	handler(){
  		// 设置值为 test
  		this.$emit('update:fatherValue', 'test')
  	}
  }
}
</script>

---

Vue3 才摸索一段时间，Vue2 的知识都忘了。我屮艸芔茻，阔怕阔怕。是时候再去看一遍文档了