0

场景:

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

已采纳

从架构角度上来讲

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

1

vue中语法糖

clipboard.png

0

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

0

props父传子
emit调用父方法

0

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

不知具体的需求如何。

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

使用的是

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

...

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

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

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

撰写答案

推广链接