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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

element中Select选择器实现自定义显示内容
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,本文主要介绍了element中Select选择器实现自定义显示内容,感兴趣的可以了解一下
2023-12-12
关于vant的日历组件,在iPhonex上可选日期空白
这篇文章主要介绍了关于vant的日历组件,在iPhonex上可选日期空白，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue2和Vue3中常用组件通信用法分享
这篇文章主要为大家整理了Vue3的8种和Vue2的12种组件通信的使用方法，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，值得收藏
2023-04-04
vue使用v-model进行跨组件绑定的基本实现方法
这篇文章主要给大家介绍了关于vue使用v-model进行跨组件绑定的基本实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
vue.js this.$router.push获取不到params参数问题
这篇文章主要介绍了vue.js this.$router.push获取不到params参数问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue实现点击导航栏滚动页面到指定位置的功能(推荐)
这篇文章主要介绍了vue实现点击导航栏滚动页面到指定位置的功能(推荐),步骤一是是通过获取不同板块的滚轮高度,步骤二通过编写执行滚动操作的函数,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
2023-11-11
Vue组件开发技巧总结
这篇文章通过代码示例给大家详细分析了Vue组件开发的相关技巧以及知识点，对此有需要的读者们参考下吧。
2018-03-03
vue中watch监听不到变化的解决
本文主要介绍了vue中watch监听不到变化的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
Vue实现路由过渡动效的4种方法
Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法，这篇文章主要介绍了Vue实现路由过渡动效的4种方法，感兴趣的可以了解一下
2021-05-05
vue学习笔记之slot插槽基本用法实例分析
这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结合实例形式分析了vue slot插槽基本使用方法与操作注意事项,需要的朋友可以参考下
2020-02-02