vue3.0父传给子的值不随父组件改变而改变问题及解决
作者：*唔西迪西*
这篇文章主要介绍了vue3.0父传给子的值不随父组件改变而改变问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3.0父传给子的值不随父组件改变而改变
最近自己在学习vue3.0-studying，虽然啥也不是，但是该学的还得学。。。
再练习一个父子传值的案例是遇到了一个问题。就是父组件传给子组件的值，父组件改变的时候而子组件不改变。
原因：子组件中的setup函数只能执行一次，所以组件中的值更新时，子组件就不听话了。。。
解决方法
使用了vue3.0里的watchEffect方法
父传子
1.父组件
父组件:引入子组件，并且把值传给子组件
<template>
<input type="text" v-model="msg">
<HelloWorld :send="msg"/>
</template><script>
import HelloWorld from './components/HelloWorld.vue'
import {reactive,toRefs} from "vue"
export default {
setup(){
const state = reactive({
msg:"hahaha"
})
return{
...toRefs(state)
}
}
}
</script>2.子组件
子组件：先用props来接收，然后将接收到值变成响应式–ref
<template>
<div>{{data}}</div>
<div>传值啊哈哈哈</div>
</template><script>
import {ref} from "vue"
export default {
name: 'HelloWorld',
props: {
send: String
},
setup(props){
const data = ref(props.send)
return{
data
}
},
}
</script>然后就是它不能随着父组件的值改变而改变。。。
解决后代码如下：
setup(props){
const state = reactive({
data:""
})
watchEffect(()=>{
state.data = props.send
})
return{
...toRefs(state)
}
},然后就能去改变了。。。
然后我就又去细细的看了看官网的解释
官方地址：https://v3.cn.vuejs.org/api/computed-watch-api.html#computed
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。