一文读懂sync的基本知识（附Demo）

前言

前端基本的语法格式细节特别多，对应科普sync的基本知识

补充阅读：官网补充 sync

定义模块以及数据初始化为false：

点击的时候通过改变模块为true：

1. 基本知识

在Vue.js中，sync修饰符是一种便捷的方式，用于在父组件和子组件之间实现双向绑定

可以简化子组件向父组件传递数据的操作，避免显式地触发事件和处理自定义事件

基本的作用如下：

当在子组件的属性上使用sync修饰符时，Vue会自动将子组件的update:propName事件映射到父组件的propName属性更新，之后子组件内部可以通过触发update:propName事件来修改父组件的属性值，实现双向绑定效果

基本的语法如下：

<child-component :prop.sync="parentProp"></child-component>

子组件触发更新事件：

this.$emit('update:prop', newValue);

2. Demo1

通过Demo深入了解其用法

父组件如下：

<template>
  <div>
    <h1>父组件</h1>
    <p>父组件的数据: {{ parentData }}</p>
    <!-- 使用sync修饰符 -->
    <child-component :data.sync="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: '初始数据',
    };
  },
};
</script>

子组件如下：

<template>
  <div>
    <h2>子组件</h2>
    <p>子组件接收到的数据: {{ data }}</p>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
export default {
  props: {
    data: String,
  },
  methods: {
    updateData() {
      // 触发update事件，更新父组件的数据
      this.$emit('update:data', '子组件更新后的数据');
    },
  },
};
</script>

解读如下：

• 父组件：
  定义一个parentData数据，并将其通过:data.sync传递给子组件
  :data.sync="parentData"表示父组件的parentData数据与子组件的data属性是双向绑定的

• 子组件：
  子组件接收父组件传递的data属性
  当子组件内部需要更新data的值时，通过触发this.$emit('update:data', newValue)来通知父组件更新parentData
  在这个示例中，点击按钮时，子组件会触发update:data事件，并将新的数据 '子组件更新后的数据' 作为参数传递给父组件

• 数据同步：
  当子组件触发update:data事件时，Vue会自动将这个事件映射为对父组件parentData的更新
  点击子组件的按钮后，父组件的parentData数据会被更新，界面也会随之变化，显示最新的数据

3. Demo2

父组件传值：普通用法与同步用法

普通用法：

<template>
  <div>
    <button @click="dialogVisible = true">打开对话框</button>
    <child-component :visible="dialogVisible"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

在这种普通用法中，dialogVisible只是单向传递给子组件，子组件无法直接修改父组件的值

同步用法：

<template>
  <div>
    <button @click="dialogVisible = true">打开对话框</button>
    <child-component :visible.sync="dialogVisible"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

使用sync修饰符后，子组件可以通过触发事件来修改父组件的值，实现双向绑定

子组件如下：

<template>
  <div v-if="visible">
    <p>这是一个对话框</p>
    <button @click="handleClose">关闭</button>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
  },
};
</script>