vue3.0父?jìng)鹘o子的值不隨父組件改變而改變問(wèn)題及解決
vue3.0父?jìng)鹘o子的值不隨父組件改變而改變
最近自己在學(xué)習(xí)vue3.0-studying，雖然啥也不是，但是該學(xué)的還得學(xué)。。。
再練習(xí)一個(gè)父子傳值的案例是遇到了一個(gè)問(wèn)題。就是父組件傳給子組件的值，父組件改變的時(shí)候而子組件不改變。
原因：子組件中的setup函數(shù)只能執(zhí)行一次，所以組件中的值更新時(shí)，子組件就不聽(tīng)話了。。。
解決方法
使用了vue3.0里的watchEffect方法
父?jìng)髯?/h3>
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來(lái)接收，然后將接收到值變成響應(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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)購(gòu)物車計(jì)算總價(jià)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購(gòu)物車計(jì)算總價(jià)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue使用路由的query配置項(xiàng)時(shí)清除地址欄的參數(shù)案例詳解
這篇文章主要介紹了vue使用路由的query配置項(xiàng)時(shí)如何清除地址欄的參數(shù)，本文通過(guò)案例給大家分享完美解決方案,需要的朋友可以參考下2023-09-09
vue3動(dòng)態(tài)加載對(duì)話框的方法實(shí)例
對(duì)話框是很常用的組件,在很多地方都會(huì)用到,下面這篇文章主要給大家介紹了關(guān)于vue3動(dòng)態(tài)加載對(duì)話框的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
Vue--Router動(dòng)態(tài)路由的用法示例詳解
這篇文章主要介紹了Vue--Router動(dòng)態(tài)路由的用法,很多時(shí)候，我們需要將給定匹配模式的路由映射到同一個(gè)組件，在?Vue?Router?中，我們可以在路徑中使用一個(gè)動(dòng)態(tài)字段來(lái)實(shí)現(xiàn)，我們稱之為路徑參數(shù)，本文對(duì)Vue?Router動(dòng)態(tài)路由相關(guān)知識(shí)給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-08-08
vue3.0中使用websocket,封裝到公共方法的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0中使用websocket,封裝到公共方法的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue單頁(yè)應(yīng)用中如何使用jquery的方法示例
最近在工作中遇到的一個(gè)需求，需要在vue-cli建立的應(yīng)用中引入jquery的方式，通過(guò)查找相關(guān)的資料最終解決了，所以這篇文章主要給大家介紹了關(guān)于在vue單頁(yè)應(yīng)用中如何使用jquery的方法示例，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
關(guān)于vue 結(jié)合原生js 解決echarts resize問(wèn)題
這篇文章主要介紹了關(guān)于vue 結(jié)合原生js 解決echarts resize問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue3組合API中setup、 ref、reactive的使用大全
本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-06-06
Vue實(shí)現(xiàn)注冊(cè)頁(yè)面的用戶交互詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)注冊(cè)頁(yè)面的用戶交互的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入掌握vue有一定的幫助,需要的小伙伴可以參考下2023-12-12
vue3中的elementPlus全局組件中文轉(zhuǎn)換方式
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07