Vue3兄弟組件傳值實(shí)現(xiàn)過程
Vue3中沒有明確的兄弟組件傳值
可以使用狀態(tài)提升，找到這兩個(gè)組件的共同父級(jí)組件，然后通過父與子之間的傳值實(shí)現(xiàn)
那么首先咱們先定義一個(gè)父組件Root 和兩個(gè)子組件我們?nèi)∶蠰eft和Right，要實(shí)現(xiàn)的效果是兩個(gè)取色器可以雙向綁定，一方改變顏色另一方與其同步一致
它是利用第三方進(jìn)行 子傳父， 父?jìng)髯?/strong>，依次進(jìn)行綁定
定義組件模板
<div id="app">
<my-root></my-root>
</div>
<template id="root">
</template>
<template id="left">
</template>
<template id="right">
</div>
</template>開始組件通信的四步驟：
- 1.定義組件模塊
- 2.定義組件
- 3.注冊(cè)組件
- 4.使用組件
const Left = {
template:'#left'，
data(){
return{
leftColor:'#0ff'//初始化數(shù)據(jù)顏色
}
}，
}
const Right = {
template:'#right'，
data(){
return{
rightColor:'#00f'//初始化數(shù)據(jù)顏色
}
}，
}
const Root = {
template:'#root'，
data(){
return{
color:''
}
}，
components:{
MyLeft: Left，
MyRight:Right，
}
}
Vue.createApp({
components:{
MyRoot:Root
}
}).mount('#app')接下來(lái)給父組件中添加子組件內(nèi)容及數(shù)據(jù)，創(chuàng)建自定義事件change-color="getColor"獲取當(dāng)前顏色，:color="color":綁定事件color就是父組件默認(rèn)顏色
<template id="root">
<my-left @change-color="getColor" :color="color"></my-left>
<!-- 添加自定義事件 -->
<my-right :color="color" @change-color="getColor"></my-right>
</template>給子組件Left 和 Right 添加內(nèi)容，那么我這邊是寫了兩個(gè)取色器的小盒子，取色器 v-model 雙向綁定顏色變量名
<template id="left">
<div :style="{width:'100px'，height:'100px'，float:'left'，'background-color':leftColor}">
<input type="color" v-model="leftColor">
</div>
</template>
<template id="right">
<div :style="{width:'100px'，height:'100px'，float:'left'，'background-color':rightColor}">
<input type="color" v-model="rightColor">
</div>
</template>那么先來(lái)注冊(cè)父組件，并且使用一個(gè)方法把自定義事件的函數(shù)getColor 給一個(gè)形參 val 設(shè)置當(dāng)前顏色 this.color 為形參val
const Root = {
template:'#root'，
data(){
return{
color:''
}
}，
methods:{
getColor(val){//自定義事件函數(shù)
this.color = val //當(dāng)前顏色
}
}，
components:{//子組件left和right
MyLeft: Left，
MyRight:Right，
}
}
Vue.createApp({
components:{
MyRoot:Root
}
}).mount('#app')注冊(cè)使用子組件Left
那么我們先監(jiān)聽當(dāng)前變量值， 給一個(gè)函數(shù)leftColor(newval)利用子傳父 $emit('自定義事件名'，參數(shù))來(lái)進(jìn)行監(jiān)聽
此時(shí)頁(yè)面還是無(wú)法雙向綁定，所以我們要在生命周期鉤子函數(shù)updated更新后進(jìn)行渲染頁(yè)面的方法，當(dāng)前變量就等于當(dāng)前綁定的color顏色值
反之，當(dāng)我們需要實(shí)現(xiàn)左右兩個(gè)取色器盒子同步綁定渲染，子組件傳給父組件后，left傳給父，父?jìng)鹘oright，right傳給父，父?jìng)鹘oleft，這里我們用到了父?jìng)髯觩rops['自定義屬性']
const Left = {
template:'#left'，
data(){
return{
leftColor:'#0ff'//初始化數(shù)據(jù)
}
}，
props:['color']，//父?jìng)髯?
watch:{//監(jiān)聽
leftColor(newval){
this.$emit('change-color'，newval) //this.$emit('自定義事件'，參數(shù)) 子傳父
}
}，
updated(){//更新后
this.leftColor = this.color //當(dāng)前盒子顏色等于color
}
}那么右邊與左邊一樣的邏輯 ，right傳父，父?jìng)鱨eft，left傳父，父給right
const Right = {
template:'#right'，
props:['color']，
data(){
return{
rightColor:'#00f'
}
}，
watch:{
rightColor(newval){
this.$emit('change-color'，newval)
}
}，
updated(){
this.rightColor = this.color
}
}那么整體代碼如下
<body>
<div id="app">
<my-root></my-root>
</div>
</body>
<template id="root">
<my-left @change-color="getColor" :color="color"></my-left>
<!-- 添加自定義事件 -->
<my-right :color="color" @change-color="getColor"></my-right>
</template>
<template id="left">
<div :style="{width:'100px'，height:'100px'，float:'left'，'background-color':leftColor}">
<input type="color" v-model="leftColor">
</div>
</template>
<template id="right">
<div :style="{width:'100px'，height:'100px'，float:'left'，'background-color':rightColor}">
<input type="color" v-model="rightColor">
</div>
</template>
<script src="../lib/vue.global.js"></script>
<script>
const Left = {
template:'#left'，
data(){
return{
leftColor:'#0ff'//初始化數(shù)據(jù)
}
}，
props:['color']，//父?jìng)髯?
watch:{//監(jiān)聽
leftColor(newval){
this.$emit('change-color'，newval) //this.$emit('自定義事件'，參數(shù)) 子傳父
}
}，
updated(){//更新后
this.leftColor = this.color //當(dāng)前盒子顏色等于color
}
}
const Right = {
template:'#right'，
props:['color']，
data(){
return{
rightColor:'#00f'
}
}，
watch:{
rightColor(newval){
this.$emit('change-color'，newval)
}
}，
updated(){
this.rightColor = this.color
}
}
const Root = {
template:'#root'，
data(){
return{
color:''
}
}，
methods:{
getColor(val){//自定義事件函數(shù)
this.color = val
}
}，
components:{
MyLeft: Left，
MyRight:Right，
}
}
Vue.createApp({
components:{
MyRoot:Root
}
}).mount('#app')
</script>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli單頁(yè)面預(yù)渲染seo-prerender-spa-plugin操作
這篇文章主要介紹了vue-cli單頁(yè)面預(yù)渲染seo-prerender-spa-plugin操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
Vue2實(shí)現(xiàn)未登錄攔截頁(yè)面功能的基本步驟和示例代碼
在Vue 2中實(shí)現(xiàn)未登錄攔截頁(yè)面功能,通?？梢酝ㄟ^路由守衛(wèi)和全局前置守衛(wèi)來(lái)完成,以下是一個(gè)基本的實(shí)現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個(gè)簡(jiǎn)單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04
vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作
這篇文章主要介紹了vue項(xiàng)目打包后請(qǐng)求地址錯(cuò)誤/打包后跨域操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右鍵彈出菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue項(xiàng)目前后端聯(lián)調(diào)(使用proxyTable實(shí)現(xiàn)跨域方式)
這篇文章主要介紹了Vue項(xiàng)目前后端聯(lián)調(diào)(使用proxyTable實(shí)現(xiàn)跨域方式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
vue高德地圖，帶你玩轉(zhuǎn)周邊，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue+Element UI 實(shí)現(xiàn)視頻上傳功能
這篇文章主要介紹了Vue+Element UI 實(shí)現(xiàn)視頻上傳功能,前臺(tái)使用Vue+Element UI中的el-upload組件實(shí)現(xiàn)視頻上傳及進(jìn)度條展示，后臺(tái)提供視頻上傳API并返回URL，具體實(shí)現(xiàn)代碼及效果展示跟隨小編一起看看吧2022-01-01
這篇文章主要為大家詳細(xì)介紹了Vue源碼之Watcher的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue2?響應(yīng)式系統(tǒng)之異步隊(duì)列
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之異步隊(duì)列，文章基于Vue2?的相關(guān)資料展開對(duì)主題的詳細(xì)介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了詳解Vuejs2.0之異步跨域請(qǐng)求,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-04-04