vue 父子通信

Question

场景：

父组件传递一个值，【就是一个布尔值】传递到子组件，我的理想的方案是 能让父组件传递的值赋值与子组件 然后子组件更改这个值 做某些事情
请问大神这样可以吗 
还是说 在父组件中直接写方法 然后在子组件监听emit这个值。。

Answer 1

从架构角度上来讲

vue 中子组件明确禁止直接修改父组件传递的 prop。这样做有这样的好处：父组件中可能有很多子组件都用了同一个父组件中的 data，出了问题可以很容易定位到是哪个子组件触发了值的变更。

<child1 :value="value" @input="value = arguments[0]" />
<child2 :value="value" @input="value = arguments[0]" />

从 vue 实现来讲

vue 开发环境中是禁止子组件修改 props 的值的，具体可看源码：src/core/instance/state.js L88-L98

defineReactive(props, key, value, () => {
    if (!isRoot && !isUpdatingChildComponent) {
      warn(
        `Avoid mutating a prop directly since the value will be ` +
        `overwritten whenever the parent component re-renders. ` +
        `Instead, use a data or computed property based on the prop's ` +
        `value. Prop being mutated: "${key}"`,
        vm
      )
    }
})

结论

所以，使用 prop 传递值到子组件实现 父 -> 子 通信；子组件 emit 事件实现 子 -> 父 通信。

如果觉得这样写很繁琐

<child2 :value="value" @input="value = arguments[0]" />

那么可以使用 vue 提供的编译时特性，这里和上面写法是等价的

<child2 v-model="value" />

如果子组件不想使用 value 作为属性，又想使用 v-model 的写法，可以在子组件中增加这样的配置

export default {
    model: {
        prop: 'yourProp',
        event: 'yourEvent'
    }
}

如果不想使用 v-model，可以尝试下 .sync 修饰符
参见 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

Answer 2

vue中语法糖

Answer 3

可以用v-model双向绑定，这样父子组件都可以修改值，
也可以用props传递到子组件，当子组件要修改的时候，emit一个事件，父组件来修改值

Answer 4

props父传子
emit调用父方法

Answer 5

vue 不允许子组件修改父组件的属性值。

不知具体的需求如何。

我在开发项目中，遇到的情况，父组件控制子组件的Modal的展示。

使用的是

// 父组件
data(){
    return {
        flag:0
    }
}

...

flag++

// 子组件
data(){
    return {
        showModal:false
    }
}，
wath:{
    flag(newFlag, oldFlag){
        // 有变化就置状态
        this.showModal=true;
        
    }
}

// 在子组件，弹窗关闭或者取消的方法里面
this.showModal=false;

Answer 6

（1）vue 2.0版本
必须是父组件用prop传值给子组件
子组件必须用emit来触发父组件
不然后台会报错
或者this.$parent.属性值 = key值可以子组件改变父组件
（2）我试过vue3.0
貌似可以实现的你的愿望，我试过可以直接子组件改变父组件