vue3.0父傳給子的值不隨父組件改變而改變問題及解決

更新時間：2023年10月07日 11:24:14 作者：*唔西迪西*

這篇文章主要介紹了vue3.0父傳給子的值不隨父組件改變而改變問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3.0父傳給子的值不隨父組件改變而改變

最近自己在學(xué)習(xí)vue3.0-studying，雖然啥也不是，但是該學(xué)的還得學(xué)。。。

再練習(xí)一個父子傳值的案例是遇到了一個問題。就是父組件傳給子組件的值，父組件改變的時候而子組件不改變。

原因：子組件中的setup函數(shù)只能執(zhí)行一次，所以組件中的值更新時，子組件就不聽話了。。。

解決方法

使用了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來接收，然后將接收到值變成響應(yīng)式–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)
    }
  },

然后就能去改變了。。。

然后我就又去細(xì)細(xì)的看了看官網(wǎng)的解釋

在這里插入圖片描述

官方地址：https://v3.cn.vuejs.org/api/computed-watch-api.html#computed

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue實現(xiàn)購物車計算總價功能
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)購物車計算總價功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue使用路由的query配置項時清除地址欄的參數(shù)案例詳解
這篇文章主要介紹了vue使用路由的query配置項時如何清除地址欄的參數(shù)，本文通過案例給大家分享完美解決方案,需要的朋友可以參考下
2023-09-09
vue3動態(tài)加載對話框的方法實例
對話框是很常用的組件,在很多地方都會用到,下面這篇文章主要給大家介紹了關(guān)于vue3動態(tài)加載對話框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
Vue--Router動態(tài)路由的用法示例詳解
這篇文章主要介紹了Vue--Router動態(tài)路由的用法,很多時候，我們需要將給定匹配模式的路由映射到同一個組件，在?Vue?Router?中，我們可以在路徑中使用一個動態(tài)字段來實現(xiàn)，我們稱之為路徑參數(shù)，本文對Vue?Router動態(tài)路由相關(guān)知識給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2022-08-08
vue3.0中使用websocket,封裝到公共方法的實現(xiàn)
這篇文章主要介紹了vue3.0中使用websocket,封裝到公共方法的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue單頁應(yīng)用中如何使用jquery的方法示例
最近在工作中遇到的一個需求，需要在vue-cli建立的應(yīng)用中引入jquery的方式，通過查找相關(guān)的資料最終解決了，所以這篇文章主要給大家介紹了關(guān)于在vue單頁應(yīng)用中如何使用jquery的方法示例，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
關(guān)于vue 結(jié)合原生js 解決echarts resize問題
這篇文章主要介紹了關(guān)于vue 結(jié)合原生js 解決echarts resize問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue3組合API中setup、 ref、reactive的使用大全
本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2021-06-06
Vue實現(xiàn)注冊頁面的用戶交互詳解
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)注冊頁面的用戶交互的相關(guān)知識,文中的示例代碼講解詳細(xì),對我們深入掌握vue有一定的幫助,需要的小伙伴可以參考下
2023-12-12
vue3中的elementPlus全局組件中文轉(zhuǎn)換方式
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉(zhuǎn)換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07