快捷導(dǎo)航

Vue組件通信之父傳子與子傳父深入探究

更新時(shí)間：2022年12月05日 11:42:46 作者：是張魚小丸子鴨

對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對組件之間消息傳遞的常用方式的總結(jié)

為什么要組件拆分

組件拆分的目的就是為了讓我們復(fù)用代碼，節(jié)省我們的代碼量，把共同的功能封裝到一個(gè)組件中，然后在各個(gè)組件中使用

組件拆分的流程

首先，把要拆分的數(shù)據(jù)單獨(dú)拆分到一個(gè)文件中，作為子組件

在父組件中import導(dǎo)入子組件，components進(jìn)行組件的注冊

父組件使用注冊子組件的標(biāo)簽

子組件中為什么要使用defineComponent方法

語法嚴(yán)謹(jǐn)主要是用來檢測ts的語法結(jié)構(gòu)的

父傳子

流程簡介：

先在父組件中的子組件上綁定一個(gè)自定義屬性

子組件中通過props接收數(shù)據(jù)，可以驗(yàn)證數(shù)據(jù)類型，設(shè)置默認(rèn)值

接收的數(shù)據(jù)可以直接使用

父組件

<template> 
  <input type="text" placeholder="請輸入你喜歡的明星">
  <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中接收父組件中傳遞過來的值

子傳父

流程簡介：

先在子組件中定義一個(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{
//父傳子接受子組件中的數(shù)據(jù)，渲染到頁面
    props:{
        list:{
            type:Array,
        }
    },
    setup(props,{emit}){
//點(diǎn)擊觸發(fā)select方法
        const select=(item)=>{
            console.log(item);
            // 會把數(shù)據(jù)傳遞給父組件中
            emit('sel',item)
        }
        return {select}
    }
}
</script>

父組件

<template>
  <input type="text" placeholder="請輸入你喜歡的明星">
  <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ù)中使用。父級組件中使用 provide() 函數(shù)向下傳遞數(shù)據(jù)；子級組件中使用 inject() 獲取上層傳遞過來的數(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修飾符，所以說子傳父的過程中無法辨別自定義事件是否原生事件，如果我們emit傳遞的事件是原生js事件名的話，這個(gè)時(shí)候父組件中事件可能會多次執(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組件通信之父傳子與子傳父深入探究的文章就介紹到這了,更多相關(guān)Vue組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: