vue解决子组件改变父组件传入props的值警告问题

需求

子组件想要改变父组件传入的值(props)

例子:
点击按钮,改变数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 父组件代码
<hello-world :msg="str"></hello-world>
data(){
return{
str:"啦啦啦"
}
},

//子组件代码
<template>
<div class="hello">
<button @click="change">改变</button>{{ msg }}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods:{
change(){
this.msg="已改变"
}
}
}
</script>

运行结果
值确实改变了,但是会有警告

原因

vue父组件props传值子组件是单向数据的,子组件改变props值的话,父组件监听不到的。

解决方案

$emit自定义事件来告诉父组件变化
先用子组件定义事件,父组件去监听,子组件一触发父组件就能监听到。
改后的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 父组件 监听子组件自定义的change-props事件
<hello-world :msg="str" @change-props="changeLate"></hello-world>
data(){
return{
str:"啦啦啦"
}
},
methods: {
changeLate(data) {
this.str = data;
}
},

// 子组件 改变props值时,自定义change-props事件,把要改变成的数据传入事件中
<button @click="change">改变</button>{{ msg }}
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods:{
change(){
let late="已改变";
this.$emit("change-props",late); //自定义事件
}
}

运行结果
完美解决