vue 组件更新父级参数组件参数双向绑定

最新推荐文章于 2024-03-28 08:56:55 发布

嘿喵-财运旺旺

最新推荐文章于 2024-03-28 08:56:55 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue javascript

本文链接：https://blog.csdn.net/sym134/article/details/88021085

javascript 同时被 2 个专栏收录

33 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

本文介绍了Vue.js中两种有效的组件通信方法。一是利用.sync修饰符结合魔法方法update:propName进行父子组件状态同步，适用于2.3.0及以上版本；二是通过自定义事件on-close在父组件中监听并处理子组件的状态变化，提供更高自由度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

方法实现主要涉及.sync $emit 需要新版本的支持（2.3.0+ 新增），实现原理实际和方法二一样 注意大小写与-的转换

官方解释：https://cn.vuejs.org/v2/guide/components-custom-events.html

<button-counter  :panel.sync="panelShow"></button-counter>





// 组件
Vue.component('button-counter', {
    props: {
        panel: {
            type: Boolean,
            default:true,
        }

    },
    methods: {
        hidePanel() {
            this.$emit('update:panel', false)   // 魔法方法  需要最新vue支持
        }
    },

    template: '<div v-show="panel" id="pop_ups">ceshi<div @click="hidePanel" class="close"></div></div>'
});

方法二

该方法的好处是每次更新需要先调用closeDialog方法，而在这个方法内可以再次自定义一些事件处理，比如确认是否关闭

自由度比较高

//  父级
<button-counter  :panel="popStatus" @on-close="closeDialog"></button-counter>


data{
popStatus:true
},
methods: {
     closeDialog:function(){
        this.popStatus=false
     },
}




// 组件
Vue.component('button-counter', {
    props: {
        panel: {
            type: Boolean,
            default:true,
        }

    },
    methods: {
        hidePanel() {
            this.$emit("on-close");

        }
    },

    template: '<div v-show="panel" id="pop_ups">ceshi<div @click="hidePanel" class="close"></div></div>'
});