淺析Vue中父子元件間怎麼通訊（父傳子|子傳父）

中父子元件間怎麼通訊？下面本篇文章給大家介紹一下父傳子和子傳父的方法，希望對大家有所幫助！

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

1、父元件傳遞給子元件

⭐⭐

父元件傳遞給子元件：通過props屬性；【相關推薦：、】
子元件傳遞給父元件：通過$emit觸發事件；

這裡我們知道，父元件有一些資料需要子元件來進行展示，那我們可以通過props來完成元件之間的通訊

通過props來完成元件之間的通訊

在這裡插入圖片描述

2、淺談Props

⭐⭐
那麼什麼是Props呢？

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

在使用 script setup的單檔案元件中，props 可以使用 defineProps() 宏來宣告：

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>
登入後複製

1）陣列型別

在沒有使用 script setup 的元件中，prop 可以使用 props 選項來宣告：

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作為第一個引數
    console.log(props.foo)
  }
}
登入後複製

例子，物件語法的使用

App.vue裡面使用元件，屬性整數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

2）物件型別

用物件的形式宣告props（這個還挺常用的）

使用 script setup

defineProps({
  title: String,
  likes: Number
})
登入後複製

非 script setup

export default {
  props: {
    title: String,
    likes: Number
  }
}
登入後複製

3、子元件傳遞給父元件

⭐⭐
子元件傳遞給父元件通過$emit觸發事件

在這裡插入圖片描述

子元件傳遞內容到父元件：

當子元件有一些事件發生的時候，比如在元件中發生了點選，父元件需要切換內容；
子元件有一些內容想要傳遞給父元件的時候；

$emit(「add」, count)
第一個引數自定義的事件名稱，第二個引數是傳遞的引數

⭐⭐
舉一個計數器案例

這裡我們有兩個子元件，一個父元件
子元件中定義好在某些情況下觸發的事件名稱
在父元件中以v-on（語法糖@）的方式傳入要監聽的事件名稱，並且繫結到對應的方法中；
最後，在子元件中發生某個事件的時候，根據事件名稱觸發對應的事件

1）父元件App.vue

父元件監聽子元件加或減的事件，通過子元件發生事件給父元件監聽
父元件監聽子元件發出的自定義事件，然後執行相應的操作

<template>
    <div class="app">
    <h2>當前計數：{{counter}}</h2>
    <!-- 1.自定義add-counter 並且監聽內部的add事件 -->
   <add-counter @add="addBtnClick"></add-counter>  
   <!-- 2.自定義su-counter元件，監聽內部的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>
登入後複製

2）子元件1AddCounter.vue

這裡定義的是計數器的加操作
子元件事件觸發之後，通過this.$emit的方式進行發出事件

<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) {
                // 讓子元件發出去一個自定義事件
                // 第一個引數自定義的事件名稱，第二個引數是傳遞的引數
                this.$emit("add",count)
            }
        }
    }
</script>
登入後複製

3）子元件2SubCounter.vue

這裡定義的是計數器的減操作

子元件事件觸發之後，通過this.$emit的方式進行發出事件

<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陣列語法
       emits:["addd"],
       methods:{
        btnClick(count) {
            this.$emit("sub",count)
        }
       }
    }
</script>
登入後複製

這個案例非常經典，可以反覆琢磨一下~

（學習視訊分享：）

以上就是淺析Vue中父子元件間怎麼通訊（父傳子|子傳父）的詳細內容，更多請關注TW511.COM其它相關文章！