Vue組件通信之父?jìng)髯优c子傳父深入探究
為什么要組件拆分
組件拆分的目的就是為了讓我們復(fù)用代碼，節(jié)省我們的代碼量，把共同的功能封裝到一個(gè)組件中，然后在各個(gè)組件中使用
組件拆分的流程
首先，把要拆分的數(shù)據(jù)單獨(dú)拆分到一個(gè)文件中，作為子組件
在父組件中import導(dǎo)入子組件，components進(jìn)行組件的注冊(cè)
父組件使用注冊(cè)子組件的標(biāo)簽
子組件中為什么要使用defineComponent方法
語(yǔ)法嚴(yán)謹(jǐn)主要是用來(lái)檢測(cè)ts的語(yǔ)法結(jié)構(gòu)的
父?jìng)髯?/h2>
流程簡(jiǎn)介：
先在父組件中的子組件上綁定一個(gè)自定義屬性
子組件中通過(guò)props接收數(shù)據(jù)，可以驗(yàn)證數(shù)據(jù)類(lèi)型，設(shè)置默認(rèn)值
接收的數(shù)據(jù)可以直接使用
父組件
<template>
<input type="text" placeholder="請(qǐng)輸入你喜歡的明星">
<List :list="list" ></List>
</template>
<script>
import {reactive } from 'vue'
import List from '../views/List.vue' //引入子組件
export default {
name:'hello',
//手動(dòng)掛載子組件
components:{List},
setup(props,context){
let list=reactive(['蔡徐坤','張?jiān)讫?,'秦霄賢','燒餅'])
//return返回
return{
list
}
}
}
</script>子組件
<template>
<div>
<ul>
<li v-for="(item,index ) in list" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
export default{
props:{
list:{
type:Array,
}
},
setup(){
}
}
</script>在props中接收父組件中傳遞過(guò)來(lái)的值
子傳父
流程簡(jiǎn)介：
先在子組件中定義一個(gè)方法，方法中調(diào)用emit方法
emit方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是自定義事件，第二個(gè)參數(shù)是要傳遞的參數(shù)
父組件中，子組件的標(biāo)簽上綁定一個(gè)事件，調(diào)用自定義方法，方法的形參就是傳遞的數(shù)據(jù)
子組件
<template>
<div>
<ul>
<li v-for="(item,index ) in list" :key="index" @click="select(item)">{{item}}</li>
</ul>
</div>
</template>
<script>
export default{
//父?jìng)髯咏邮茏咏M件中的數(shù)據(jù)，渲染到頁(yè)面
props:{
list:{
type:Array,
}
},
setup(props,{emit}){
//點(diǎn)擊觸發(fā)select方法
const select=(item)=>{
console.log(item);
// 會(huì)把數(shù)據(jù)傳遞給父組件中
emit('sel',item)
}
return {select}
}
}
</script>父組件
<template>
<input type="text" placeholder="請(qǐng)輸入你喜歡的明星">
<List :list="list" @sel="sel" ></List>
</template>
<script>
import { reactive } from 'vue'
import List from '../views/List.vue'
export default {
name:'hello',
components:{List},
setup(){
let list=reactive(['蔡徐坤','張?jiān)讫?,'秦霄賢','燒餅'])
const sel=(data)=>{
console.log(data);
}
return{
list,sel
}
}
}
</script>provide和inject方法
provide() 和 inject() 可以實(shí)現(xiàn)嵌套組件之間的數(shù)據(jù)傳遞。這兩個(gè)函數(shù)只能在 setup() 函數(shù)中使用。父級(jí)組件中使用 provide() 函數(shù)向下傳遞數(shù)據(jù)；子級(jí)組件中使用 inject() 獲取上層傳遞過(guò)來(lái)的數(shù)據(jù)
傳遞數(shù)據(jù)的組件
<template>
<div>
<h3>{{name}}</h3>
<Son></Son>
</div>
</template>
<script>
import Son from '../views/Son.vue'
import { provide,reactive } from 'vue'
export default {
components:{
Son
},
setup(){
let name=reactive('張三')
provide('name',name)
return {
name
}
}
}
</script>子組件
<template>
<div>
<Son1></Son1>
</div>
</template>
<script>
import Son1 from '../views/Son1.vue'
import {inject} from 'vue'
export default {
components:{
Son1
},
setup(){
let name=inject('name')
console.log(name);
return {name}
}
}
</script>孫子組件
<template>
<div>
<h3>{{names}}</h3>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup(){
let names=inject('name')
return {names}
}
}
</script>組件通信的雙向綁定
- 在組件通信的傳遞屬性的時(shí)候增加個(gè)v-model指令v-model:username=“Name"
- 子組件中文本框接受數(shù)據(jù)，綁定事件$emit("update:username",傳遞更新的值)
v-model 和$emit() 中update配合使用
vue3中去掉了.native修飾符，所以說(shuō)子傳父的過(guò)程中無(wú)法辨別自定義事件是否原生事件，如果我們emit傳遞的事件是原生js事件名的話，這個(gè)時(shí)候父組件中事件可能會(huì)多次執(zhí)行
這個(gè)時(shí)候可以在子組件中增加emits屬性配置，配置子組件向父組件傳遞或者定義的自定義事件
父組件
<template>
<div>
<input type="text" class="inp" v-model="username"/>
<Son v-model:username="username"></Son>
</div>
</template>
<script>
import Son from '../views/Son.vue'
import { reactive } from 'vue'
export default {
components:{
Son
},
setup(){
let username=reactive('')
return {
username
}
}
}
</script>子組件
<template>
<div>
<input type="text" :value="username" @input="(e) => $emit('update:username', e.target.value)" />
</div>
</template>
<script>
import { inject } from 'vue'
export default {
props: ["username"],
setup() {
}
}
</script>到此這篇關(guān)于Vue組件通信之父?jìng)髯优c子傳父深入探究的文章就介紹到這了,更多相關(guān)Vue組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
當(dāng)vue路由變化時(shí),改變導(dǎo)航欄的樣式方法
今天小編就為大家分享一篇當(dāng)vue路由變化時(shí),改變導(dǎo)航欄的樣式方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue頁(yè)面使用阿里oss上傳功能的實(shí)例（一）
本篇文章主要介紹了vue頁(yè)面使用阿里oss上傳功能的實(shí)例（一），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法
這篇文章主要介紹了vue給input file綁定函數(shù)獲取當(dāng)前上傳的對(duì)象完美實(shí)現(xiàn)方法,需要的朋友可以參考下2017-12-12
Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機(jī)制解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件(推薦)
這篇文章主要介紹了使用Vue的slot插槽分發(fā)父組件內(nèi)容實(shí)現(xiàn)高度復(fù)用、更加靈活的組件 ,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能(示例詳解)
最近在開(kāi)發(fā)工業(yè)品超市的后臺(tái)系統(tǒng),遇到一個(gè)需求,就是實(shí)現(xiàn)在一個(gè)table表格中多選數(shù)據(jù),在網(wǎng)上查了好多,有些方法真的是無(wú)語(yǔ),下面通過(guò)本文給大家分享vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能,感興趣的朋友跟隨小編一起看看吧2024-05-05
Vue頁(yè)面偶爾樣式錯(cuò)亂,刷新即恢復(fù)的問(wèn)題及解決
這篇文章主要介紹了Vue頁(yè)面偶爾樣式錯(cuò)亂,刷新即恢復(fù)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問(wèn)題
這篇文章主要介紹了vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue頁(yè)面切換過(guò)渡transition效果
這篇文章主要介紹了vue頁(yè)面切換過(guò)渡transition效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10