Vue組件通信之父傳子與子傳父詳細講解

更新時間：2022年10月27日 10:30:46 作者：東非不開森

這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下

父組件傳遞給子組件

父組件傳遞給子組件：通過props屬性；
子組件傳遞給父組件：通過$emit觸發(fā)事件；

這里我們知道，父組件有一些數(shù)據(jù)需要子組件來進行展示，那我們可以通過props來完成組件之間的通信

通過props來完成組件之間的通信

淺談Props

那么什么是Props呢？

作用：接受父組件傳遞過來的屬性
Props是你可以在組件上注冊一些自定義的attribute（屬性）；
父組件給這些attribute（屬性）賦值，子組件通過attribute的名稱獲取到對應(yīng)的值；

在使用 script setup的單文件組件中，props 可以使用 defineProps() 宏來聲明：

<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script>

數(shù)組類型

在沒有使用 script setup 的組件中，prop 可以使用 props 選項來聲明：

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作為第一個參數(shù)
    console.log(props.foo)
  }
}

例子，對象語法的使用

App.vue里面使用組件，屬性整數(shù)props所定義的

<template>
	<show-info name="kk" age="18" height="1.7"  />
</template>

showInfo.vue子組件

 export default {
        props:{
            name :{
                type:String,
                default:"我是默認值name"
            },
            height:{
                type:Number,
                default:2
            }
        }
    }

另外：

那么type的類型都可以是哪些呢？

String
Number
Boolean
Array
Object
Date
Function
Symbol

對象類型

用對象的形式聲明props（這個還挺常用的）

使用 script setup

defineProps({
  title: String,
  likes: Number
})

非 script setup

export default {
  props: {
    title: String,
    likes: Number
  }
}

子組件傳遞給父組件

子組件傳遞給父組件通過$emit觸發(fā)事件

子組件傳遞內(nèi)容到父組件：

當子組件有一些事件發(fā)生的時候，比如在組件中發(fā)生了點擊，父組件需要切換內(nèi)容；
子組件有一些內(nèi)容想要傳遞給父組件的時候；

$emit(“add”, count)

第一個參數(shù)自定義的事件名稱，第二個參數(shù)是傳遞的參數(shù)

舉一個計數(shù)器案例

這里我們有兩個子組件，一個父組件
子組件中定義好在某些情況下觸發(fā)的事件名稱
在父組件中以v-on（語法糖@）的方式傳入要監(jiān)聽的事件名稱，并且綁定到對應(yīng)的方法中；
最后，在子組件中發(fā)生某個事件的時候，根據(jù)事件名稱觸發(fā)對應(yīng)的事件

父組件App.vue

父組件監(jiān)聽子組件加或減的事件，通過子組件發(fā)生事件給父組件監(jiān)聽
父組件監(jiān)聽子組件發(fā)出的自定義事件，然后執(zhí)行相應(yīng)的操作

<template>
    <div class="app">
    <h2>當前計數(shù)：{{counter}}</h2>
    <!-- 1.自定義add-counter 并且監(jiān)聽內(nèi)部的add事件 -->
   <add-counter @add="addBtnClick"></add-counter>  
   <!-- 2.自定義su-counter組件，監(jiān)聽內(nèi)部的sub事件 -->
   <sub-counter @sub="subBtnClick"></sub-counter>
   </div>
</template>
<script>
import AddCounter from './AddCounter.vue'
import SubCounter from './SubCounter.vue'
    export default {
  components: { 
    AddCounter,
    SubCounter
 },
    data() {
        return {
            counter:0
        }
    },
    methods:{
        addBtnClick(count) {
            this.counter += count
        },
        subBtnClick(count) {
            this.counter -= count
        }
    }
}
</script>

子組件1AddCounter.vue

這里定義的是計數(shù)器的加操作子組件事件觸發(fā)之后，通過this.$emit的方式進行發(fā)出事件

<template>
    <div class="add">
        <button @click="btnClick(1)">+1</button>
        <button @click="btnClick(5)">+5</button>
        <button @click="btnClick(10)">+10</button>
    </div>
</template>
<script>
    export default {
        methods:{
            btnClick(count) {
                // 讓子組件發(fā)出去一個自定義事件
                // 第一個參數(shù)自定義的事件名稱，第二個參數(shù)是傳遞的參數(shù)
                this.$emit("add",count)
            }
        }
    }
</script>

3. 子組件2SubCounter.vue

這里定義的是計數(shù)器的減操作

子組件事件觸發(fā)之后，通過this.$emit的方式進行發(fā)出事件

<template>
    <div class="sub">
        <button @click="btnClick(1)">-1</button>
        <button @click="btnClick(5)">-5</button>
        <button @click="btnClick(10)">-10</button>
    </div>
</template>
<script>
    export default {
        // 1.emits數(shù)組語法
       emits:["addd"],
       methods:{
        btnClick(count) {
            this.$emit("sub",count)
        }
       }
    }
</script>

這個案例非常經(jīng)典，可以反復(fù)琢磨一下~

到此這篇關(guān)于Vue組件通信之父傳子與子傳父詳細講解的文章就介紹到這了,更多相關(guān)Vue組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: