.sync 修饰符

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。

今天扒拉官方文档,发现.sync这块还是理解的不是太好,于是写一个demo,做一下记录。

使用场景:对一个 prop 进行“双向绑定”

prop是啥??

单项数据流,所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。

怎么进行“双向绑定”?

父组件:

<template>
  <div id="app">
    父组件输入框:<input v-model="inputValue"> <br> 父组件值:{{inputValue}}
    <hr />
    子组件:<child :fatherInput.sync="inputValue"></child>
  </div>
</template>

<script>
import child from './components/child.vue';
export default {
  name: 'app',
  props: [],
  data() {
    return {
      inputValue: '',
    };
  },
  components: {
    child,
  },
  methods: {},
};
</script>

子组件:

<template>
  <div>
    父组件传递的值: {{fatherInput}} <br>
    子组件输入框:<input v-model="childInput">
  </div>
</template>
<script>
export default {
  props: {
    fatherInput: String,
  },
  data() {
    return {
      childInput: null,
    };
  },
  computed: {},
  watch: {
    childInput() {
      this.$emit('update:fatherInput', this.childInput);
    },
  },
  methods: {},
};
</script>

.sync 修饰符

上图是没问题的,父级 prop 的更新会向下流动到子组件。

父组件需要添加.sync

:fatherInput.sync="inputValue"

子组件以 update:myPropName 的模式触发事件:

this.$emit('update:fatherInput', this.childInput);

这样,我在子组件中改变childInput,通过watch监听,同步给父组件inputValue

.sync 修饰符

更多注意事项:自定义事件---.sync 修饰符

仅有一条评论

  1. 回复

    网页背景上的一坨坨炫光,太难受了,影响看文章啊。

添加新评论