vue中.sync修饰符原理

.sync其实就是一个语法糖,是普通父子组件传值的一个简写

普通父子组件传值

//父组件
<template>
  <div>
    <div>我是父组件</div>
    <child :visible="showChild" @taggleChild="hideChild"></child>
  </div>
</template>
<script>
import child from "./child";
export default {
  data() {
    return {
      showChild: true
    };
  },
  methods: {
    hideChild(val) {
      this.showChild = val;
    }
  }
};
</script>

//子组件
<template>
   <div @click="hideChild" v-show="visible">我是子组件</div>
</template>
<script>
export default {
  props: ['visible'],
  methods: {
    hideChild() {
      this.$emit('taggleChild',false);
    }
  }
};
</script>

使用.async

//父组件
 <child :visible.sync="showChild"></child>

//子组件
<template>
  <div @click="hideChild">我是子组件</div>
</template>
<script>
export default {
  props: ['visible'],
  methods: {
    hideChild() {
      this.$emit("update:visible",false);
    }
  }
};
</script>

等同与

//父组件
<child
 :visible="showChild"
 @update:visible="(val)=>{showChild=val}">
</child>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容