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 extend学习示例讲解
这篇文章主要介绍了Vue.extend使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-09-09
vue中swiper开启loop后,点击事件不响应的解决方案
这篇文章主要介绍了vue中swiper开启loop后,点击事件不响应的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vueJs函数toRaw markRaw使用对比详解
这篇文章主要为大家介绍了vueJs函数toRaw markRaw使用对比详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
el-tree文字显示不全的解决办法
本文主要介绍了el-tree文字显示不全的解决办法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
React之input动态取值和赋值方式
这篇文章主要介绍了React之input动态取值和赋值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue如何实现二进制流文件导出excel
这篇文章主要介绍了vue如何实现二进制流文件导出excel，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue3如何自定义v-permission权限指令
这篇文章主要为大家详细介绍了Vue3如何编写一个 v-permission 指令来根据用户权限动态控制元素的渲染,感兴趣的小伙伴可以参考一下
2024-12-12
vue3中使用router路由实现跳转传参的方法
这篇文章主要介绍了vue3中使用router路由实现跳转传参的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
Vue keep-alive实践总结（推荐）
本篇文章主要介绍了Vue keep-alive实践总结（推荐），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
VUE中$refs的基本用法举例
ref 加在子组件上，用this.$refs.（ref值）获取到的是组件实例，可以使用组件的所有方法，在使用方法的时候直接this.$refs.（ref值）.方法（）就可以使用了，这篇文章主要介绍了VUE中$refs的基本用法,需要的朋友可以参考下
2022-12-12