亲宝软件园·资讯

展开

Vue sync修饰符

Celester_best 人气:0

前几天在看别人代码时,发现了sync修饰符的妙用,特记录其用法和原理如下。

不使用sync修饰符的代码示例

父组件:

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子组件</h3>
    <SyncDemo :show="show" @update="update"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
  methods: {
    update(flag) {
      this.show = flag;
    },
  },
};
</script>

子组件:

<template>
  <div>
    <button @click="changeFlag">点击</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update", !this.show);
    },
  },
};
</script>

点击子组件的按钮就可以控制父组件“11111”的显示与隐藏。

使用sync修饰符,代码就会简单很多。

使用sync修饰符的代码示例

父组件:

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子组件</h3>
    <SyncDemo :show.sync="show"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
};
</script>

子组件:

<template>
  <div>
    <button @click="changeFlag">点击</button>
  </div>
</template>
<script>
export default {
  name: "SyncDemo",
  components: {},
  props: ["show"],
  methods: {
    changeFlag() {
      this.$emit("update:show", !this.show);
    },
  },
};
</script>

可以看到使用sync修饰符之后,父组件就不需要向子组件传递方法,父组件也不需要特意写修改变量的方法了。此时点击子组件的按钮,一样可以控制父组件的“11111”的显示与隐藏。

sync修饰符的原理

在不使用sync时父组件中子组件绑定的update事件没有传递参数,其实绑定事件默认传递了$event参数。

这里值得注意的是如果绑定的是clikc等原生事件时,$event是指事件对象,如果是自定义事件,$event则指子组件触发该方法时传递的参数,在上面的例子中,$event则指show变量。

所以不使用sync修饰符时,父组件的代码可以改造成如下(直接将$event赋值给show变量,父组件不需要再另外写一个修改变量的方法):

<template>
  <div>
    <div v-if="show">11111</div>
    <h3>下面是子组件</h3>
    <SyncDemo :show="show" @update="show = $event"></SyncDemo>
  </div>
</template>
<script>
import SyncDemo from "./SyncDemo.vue";
export default {
  name: "Test",
  components: { SyncDemo },
  props: [],
  data() {
    return {
      show: true,
    };
  },
};
</script>

我们再进一步修改代码(绑定方法时指明要修改的变量):

<SyncDemo :show="show" @update:show="show = $event"></SyncDemo>

这行代码的语法糖的方式就是使用sync修饰符(代码变得更简单)

<SyncDemo :show.sync="show"></SyncDemo>

以上就是通过一步步代码演变,最后变成使用sync修饰符的方式修改父组件的变量,使我们明白了sync修饰符的原理。

现粘贴vue官网上关于sync修饰符的解释:

加载全部内容

相关教程
猜你喜欢
用户评论