VUE 组件之间.sync的传参

最新推荐文章于 2025-06-20 10:34:39 发布

阳光先做

最新推荐文章于 2025-06-20 10:34:39 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： .snyc

本文链接：https://blog.youkuaiyun.com/m0_38062866/article/details/89242418

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现子组件如何通过自定义事件更新父组件状态的示例。具体展示了如何在子组件中使用this.$emit触发父组件的属性更新，解决实际开发中常见的组件通信问题。

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

在创建弹框组件的时候，会遇到子组件的props更新到父组件的问题

这是父组件的代码

 <Dialog :show.sync="showSafeDialog" title="安全防护措施和手段" width="50%">
            <div v-html="means"></div>
        </Dialog>

   data() {
            return {
                    showSafeDialog: false
            }
        },

子组件


        <div class="dialog" v-if="show">
            <div class="mainBox" :style="{width: width,left: ( 100 - parseInt(width)) / 2+'%',top: top}">
                <div class="title">{{title}}</div>
                <GeminiScrollbar style="max-height: 90%;">
                    <div class="content">
                        <slot></slot>
                    </div>
                </GeminiScrollbar>
            </div>
            <div class="zhe" @click="close"></div>
        </div>

<script>
    export default {
        name: "Dialog",
        props: {
            title: {
                default: '',
                type: String
            },
            width: {
                default: '60%',
                type: String
            },
            show: {
                default: false,
                type: Boolean
            },
            top: {
                default: '20%',
                type: String
            }
        },
        methods: {
            close() {
//This is 关键
                this.$emit('update:show', false)
            }
        },
        watch: {}
    }
</script>

通过 this.$emit('update:**', 参数)，这种方式更新了父组件的 showSafeDialog