本文主要是介绍解决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
欧克欧克，如果大佬有其他的解决方法，也可以说出来，增长我的知识，多谢多谢
这篇关于解决vue3.0父传给子的值不随父组件改变而改变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
