vue 中 sync修饰符的用法

父组件传递值给子组件时 在其绑定的变量后加上 :变量 .sync='xxx' , 当在子组件中需要改变这个父组件中的值的时候 使用 $emit( 'update: 变量', 值 ), 这样可以省略一步在父组件中的接受函数

常规写法:
  • 父组件中

     <myComponent :show='valueChild' @changeShow="accept" </myComponent>
      data(){
          return{
              valueChild: true
          }
      },
     methods: {
         accept (data) {
             this.valueChild = data ; // 接收子组件传递回来的值 并改变原有值
         }
     }
    
  • 子组件中

    <template>
        <button @click ="closeDiv">关闭</button>
    </template>
    props: ['show'],
    methods: {
        closeDiv() {
            this.$emit('changeShow', false); // 发射新值到父组件
        }
    }
    
sync修饰符写法:
  • 父组件中

    <myComponent :show.sync='valueChild' ></myComponent>
     data(){
         return{
             valueChild: true
         }
     }
    
  • 子组件中

    <template>
        <button @click="closeDiv">关闭</button>
    </template>
    props: ['show'],
    methods: {
        closeDiv() {
            this.$emit('update:show', false); //触发 input 事件,并传入新值
        }
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容