zoukankan      html  css  js  c++  java
  • vue.sync修饰符与$emit(update:xxx)

    场景:需要封装一个基于element-ui的dialog弹框;发现关闭弹框时,父组件的值没变化,导致再次出发dialog弹框,而弹框没出现。于是想办法,让父组件的attrs的值通过子组件出发改变;

    想过用v-mode,但是这需要给组件多加一个属性,我想让这个组件像用element-ui一样使用,不多加一个自定义的属性,于是就查到了sync修饰符(自定义事件)

    下面是一个小组件:

    <template>
        <div>
            <h1>{{$attrs.visible}}</h1>
            <el-button type="primary" @click="changeParentBalue">改变父组件的值</el-button>
        </div>
    </template>
    
    <script>
    export default {
        methods:{
            changeParentBalue(){
                this.$emit("update:visible",Math.random()*10)
            }
        }
    }
    </script>

    父组件调用:

    <template>
      <div>
        使用.sync修饰符,即
        <h1>{{value}}</h1>
        <update :visible.sync="value"></update>
        <hr>
        与不使用.sync,即
        <h1>{{value1}}</h1>
        <update v-bind:visible="value1" v-on:update:visible="value1=$event"></update>
      </div>
    </template>
    
    <script>
    export default {
      components:{
        update:() => import("@/components/update")
      },
      data(){
        return{
          value:"1",
          value1:"1",
        }
      },
    }
    </script>

    效果:

  • 相关阅读:
    git
    oracle object_id和data_object_id的区别
    statspack系列8
    statspack系列7
    statspack系列6
    statspack系列5
    statspack系列4
    statspack系列3
    statspack系列2
    MySQL源码之两阶段提交
  • 原文地址:https://www.cnblogs.com/fqh123/p/14508923.html
Copyright © 2011-2022 走看看