vue传值那些事

Question

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

父

子

Answer 1

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

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


//mu-dialog.vue
..this.$emit('close',false);

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

传值的方式不对，在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... }来响应子组件的状态