Vue第8篇，Vue中的父子闭环和.sync修饰符（父传子，在子组件中修改父组件状态和.sync修饰符）

简述：在Vue.js中，“父子闭环”和.sync修饰符是关于组件间通信的重要概念，特别是在处理父组件和子组件之间的数据流和状态同步时。这里来记录一下

---

Vue.js ～ 第 8 篇    ——    Vue中的父子闭环和.sync修饰符

一. 父子闭环

Vue.js遵循“单向数据流”的原则，这意味着数据应该从父组件向下流动到子组件，而子组件不应该直接修改父组件的数据。然而，在某些情况下，你可能需要子组件能够影响父组件的状态，这就形成了所谓的“闭环”。

1. 父传子，在父组件标签上绑定一个属性，传递值:

//data数据
lineBtnFlag:-1,
//父传子
:btnFlag="lineBtnFlag" 

2. 子组件props接收，和data同级:

props: ["btnFlag"],       
//子组件接收，可以使用this.btnFlag调用；

3. 子组件的事件方法，使用$emit来调用父组件定义方法alterFather，传值：

chosePassFather() { this.$emit("alterFather", 1); },
//传修改的值给父组件

4. 父组件的自定义方法alterFather：

@alterFather="passSon" 
//父组件标签的自定义方法

5. 父组件的自定义事件passSon，用来接收子组件的值，这时flag = 1，然后再传递给子组件形成闭环：

passSon(flag) { this.lineBtnFlag = flag; }
//把子组件传过来的值也就是1再回传给子组件形成闭环，这样就修改了父组件的属性，
//其实就是父传子，子传父，父再传子，这样就形成了闭环

二. .sync修饰符

.sync修饰符是Vue.js中用于简化上述闭环过程的一种语法糖。它允许你以更简洁的方式实现子组件到父组件的数据同步。

所以在子组件修改父组件状态时，也可以使用.sync修饰符：

//1、父传子
:btnFlag.sync="lineBtnFlag"
//2、子组件接收
props: ["btnFlag"],
//3、在子组件更新btnFlag，值为1
this.$emit("update:btnFlag", 1); 

使用场景不同，自己斟酌。