.sync修饰符

  • vue .sync 修饰符，vue .sync 修饰符以前存在于vue1.0版本里，但是在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时
  • 我们需要做的只是让子组件改变父组件状态的代码更容易被区分，从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器
  • 作用：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//父组件
//点击新增弹出对话框
<el-button type="danger" class="add_btn" @click="alert_dialog" >新增</el-button>

 <InfoDialog v-model:flag.sync="dialog_info"></InfoDialog>
//相当于
<!--
<InfoDialog v-model:flag="dialog_info" @update:flag="val => dialog_info = val"></InfoDialog>
-->


const dialog_info = ref(false);
const alert_dialog = () => {
      dialog_info.value = true;
    };
  • 当子组件需要更新 dialog_info 的值时，它需要触发一个更新事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//子组件
<template>
  <div>
    <el-dialog title="修改信息" v-model="dialog_info_flag" @close="close">
      ........
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive, watch } from "vue";
export default {
  name: "Dialog",
  props: {
    flag: {
      type: Boolean,
      default: false,
     },
  	},
  setup(props, { emit }) {
    const dialog_info_flag = ref(true);

    // 监听
    watch(
      () => props.flag,
      () => {
        dialog_info_flag.value = props.flag;
      }
    );

    const close = () => {
      dialog_info_flag.value = false;
      emit("update:flag", false);
    };

    return {
      dialog_info_flag,
      close,
    };
  },
};
</script>
<style lang="scss" scoped>
</style>

vue3.0中使用子组件传值给父组件

1
2
3
4
5
<ChildComponent :title.sync="pageTitle" />

<!-- 替换为 -->

<ChildComponent v-model:title="pageTitle" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
父组件：
<ChildComponent v-model="pageTitle" />

子组件：
export default {
  props: {
    modelValue: String // 以前是`value：String`
  },
  methods: {
    changePageTitle(title) {
      this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
    }
  }
}
  • 示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
父组件引入子组件：
<CityPicker v-model="data">
</CityPicker>

const data = ref({}); //数据

监听变化：
watch(
  () => data.value,
  (newVal) => {
     console.log(data.value);
     
   }
 );
1
2
3
4
5
6
7
8
9
10
11
12
子组件：
props: {
    modelValue: Object,
}
    
setup(props, { emit }) {
      
   ...
   emit("update:modelValue", newData);
    
   ...
}