vue3.0父传给子的值不随父组件改变而改变问题及解决
更新时间：2023年10月07日 11:24:14 作者：*唔西迪西*
这篇文章主要介绍了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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue实现购物车计算总价功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue使用路由的query配置项时如何清除地址栏的参数，本文通过案例给大家分享完美解决方案,需要的朋友可以参考下2023-09-09
对话框是很常用的组件,在很多地方都会用到,下面这篇文章主要给大家介绍了关于vue3动态加载对话框的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Vue--Router动态路由的用法,很多时候，我们需要将给定匹配模式的路由映射到同一个组件，在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数，本文对Vue Router动态路由相关知识给大家介绍的非常详细，需要的朋友参考下吧2022-08-08
这篇文章主要介绍了vue3.0中使用websocket,封装到公共方法的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最近在工作中遇到的一个需求，需要在vue-cli建立的应用中引入jquery的方式，通过查找相关的资料最终解决了，所以这篇文章主要给大家介绍了关于在vue单页应用中如何使用jquery的方法示例，需要的朋友可以参考借鉴，下面来一起看看吧。2017-07-07
关于vue 结合原生js 解决echarts resize问题
这篇文章主要介绍了关于vue 结合原生js 解决echarts resize问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue3组合API中setup、 ref、reactive的使用大全
本文给大家介绍vue3组合API中setup、 ref、reactive的用法，初步了解reactive的使用及具体用法，通过示例代码给大家介绍的非常详细，需要的朋友参考下吧2021-06-06
这篇文章主要为大家详细介绍了Vue实现注册页面的用户交互的相关知识,文中的示例代码讲解详细,对我们深入掌握vue有一定的帮助,需要的小伙伴可以参考下2023-12-12
这篇文章主要介绍了vue3中的elementPlus全局组件中文转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论