vue传值那些事

kukujbb
  • 80

想把父组件的值dialog传给子组件apply然后通过点击关闭遮罩层,dialog是控制遮罩层的,也试过props了。但是报错是怎么回事??
clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

回复
阅读 4.9k
5 个回答
czl
  • 1.1k

那个报错的大概意思是 避免在组件内运算props

//page
<template>
    <mu-dialog :open="dialog" @close="dialog=false"></mu-dialog>
</template>


//mu-dialog.vue
..this.$emit('close',false);
lxholding
  • 5
新手上路,请多包涵

看代码dialog是做为mu-dialog控件的参数而不是apply控件的参数,有点困惑楼主是怎么把dialog传递到apply控件的?

因为父组件里修改了props属性,会覆盖子组件里的值,所以你在子组件里面直接用this.dialog = !this.dialog会产生一个警告(并非错误,功能还是都是正常的)。你可以把这个替换成this.$emit('close'); 再在父组件里处理这个事件,修改dialog的值。

第一,已经没有双向数据了,所以不必加sync
第二,父级的数据,子组件想要修改需要通过$emit方法进行修改

传值的方式不对,在vue2中有两种办法,一种是在父组件中传一个v-model="outerLoading",然后子组件里面

watch:{
    outerLoading: {
        immediate: true,
        handler() {
            this.innerLoading = v
        }
    },
    innerLoading (v) {
        this.emit('input', v)
    }
}

这样outLoading就会响应innerLoading,实现双向绑定的功能。
还有一种做法和这个类似,就是把this.emit('input', v)换成this.emit('eventName', v),然后在父组件中@eventName="eventFunc", 再通过父组件中的eventFunc(v) { //code... }来响应子组件的状态

宣传栏