土豆博客

Vue中.sync修饰符的使用

# 一、概述

最近在复习Vue基础的时候看到.sync居然有点陌生,在网上查了一下,又结合自己之前遇到的例子,瞬间豁然开朗了,在此记录一下。

我们知道,在vue的组件通信props中,一般情况下,数据都是单向的,即父组件数据的更改会下传到子组件,但子组件不能直接更改父组件传入的值,需要通过$emit触发自定义事件,通知父组件改变后的值。

用vue官方的话来说就是父级 prop 的更新会向下流动到子组件中,但是反过来则不行,这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。这种情况被称为单向数据流

在有些情况下,我们可能需要对一个 prop 进行"双向绑定"。也就是想实现在子组件中改变值,父组件中的值也能随着变化。从 2.3.0 Vue引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器,可以使props的单向数据流变为双向数据流

举个Demo,现在我们在父组件中有个按钮,并有一个初始值value,点击按钮后可以将父组件上的value值改变,改变后的value值也传递给了子组件。子组件也有一个按钮,点击按钮后可以将父组件传递过来的value值改变。也就是说子组件可以修改父组件传递过来的值

# 二、不用.sync

Father.vue

<template>
  <div class="home">
    {{value}}
    <button @click="ChangeValueInFather">点我在父组件修改数据为xtd</button>
    <child :val = "value"></child>
  </div>
</template>

<script>
import child from "../components/child";
export default {
  name: "Home",
  data() {
    return {
      value: ""
    };
  },
  methods: {
    ChangeValueInFather() {
      this.value = "xtd";
    }
  },
  components: {
    child
  }
};
</script>

Child.vue

<template>
    <div v-if="val">
       <p>这是父组件中的数据: {{val}}</p>
       <button @click="ChangeValueInChild">点我在子组件修改父组件的数据</button>
    </div>
</template>

<script>
    export default {
        props:['val'],
        methods:{
            ChangeValueInChild(event) {
               this.val = "我在子组件中修改了父组件中的value啦!"
            }
        }
    }
</script>

<style scoped>

</style>

QQ图片20200216220557.png

可以看到控制台直接报错:大致意思就是在子组件中不要直接修改父组件的属性值

# 三、使用.sync

Father.vue

<template>
  <div class="home">
    {{value}}
    <button @click="ChangeValueInFather">点我在父组件修改数据为xtd</button>
    <child :val.sync = "value"></child>   <!-- 使用.sync修饰  -->
  </div>
</template>

<script>
import child from "../components/child";
export default {
  name: "Home",
  data() {
    return {
      value: ""
    };
  },
  methods: {
    ChangeValueInFather() {
      this.value = "xtd";
    }
  },
  components: {
    child
  }
};
</script>

Child.vue

<template>
    <div v-if="val">
       <p>这是父组件中的数据: {{val}}</p>
       <button @click="ChangeValueInChild">点我在子组件修改父组件的数据</button>
    </div>
</template>

<script>
    export default {
        props:['val'],
        methods:{
            ChangeValueInChild(event) {
            	//固定语法格式为this.$emit('update:修改的状态的名称', 修改的值);
                this.$emit('update:val', '我在子组件中修改了父组件中的value啦!');
            }
        }
    }
</script>

<style scoped>

</style>

需要注意的是:带有.sync的v-bind不能和表达式一起使用,(例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)

code
top

扫码添加,一起进步

wechat-code

为了保障最佳预览体验,博客已不支持IE浏览器的访问,邀请您使用以下现代高级浏览器。

谷歌浏览器(推荐) 火狐浏览器

注:如果你使用的是360,QQ等双核浏览器,请开启极速模式