vue3.0父?jìng)鹘o子的值不隨父組件改變而改變問題及解決
更新時(shí)間：2023年10月07日 11:24:14 作者：*唔西迪西*
這篇文章主要介紹了vue3.0父?jìng)鹘o子的值不隨父組件改變而改變問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3.0父?jìng)鹘o子的值不隨父組件改變而改變
最近自己在學(xué)習(xí)vue3.0-studying，雖然啥也不是，但是該學(xué)的還得學(xué)。。。
再練習(xí)一個(gè)父子傳值的案例是遇到了一個(gè)問題。就是父組件傳給子組件的值，父組件改變的時(shí)候而子組件不改變。
原因：子組件中的setup函數(shù)只能執(zhí)行一次，所以組件中的值更新時(shí)，子組件就不聽話了。。。
解決方法
使用了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來接收，然后將接收到值變成響應(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.extend使用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案
這篇文章主要介紹了vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vueJs函數(shù)toRaw?markRaw使用對(duì)比詳解
這篇文章主要為大家介紹了vueJs函數(shù)toRaw?markRaw使用對(duì)比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本文主要介紹了el-tree文字顯示不全的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
React之input動(dòng)態(tài)取值和賦值方式
這篇文章主要介紹了React之input動(dòng)態(tài)取值和賦值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue如何實(shí)現(xiàn)二進(jìn)制流文件導(dǎo)出excel
這篇文章主要介紹了vue如何實(shí)現(xiàn)二進(jìn)制流文件導(dǎo)出excel，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue3如何自定義v-permission權(quán)限指令
這篇文章主要為大家詳細(xì)介紹了Vue3如何編寫一個(gè)?v-permission?指令來根據(jù)用戶權(quán)限動(dòng)態(tài)控制元素的渲染,感興趣的小伙伴可以參考一下2024-12-12
vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的方法
這篇文章主要介紹了vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
Vue keep-alive實(shí)踐總結(jié)（推薦）
本篇文章主要介紹了Vue keep-alive實(shí)踐總結(jié)（推薦），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
ref 加在子組件上，用this.$refs.（ref值） 獲取到的是組件實(shí)例，可以使用組件的所有方法，?在使用方法的時(shí)候直接this.$refs.（ref值）.方法（） 就可以使用了，這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下2022-12-12