淺析Vue中父子組件間怎麼通信（父傳子|子傳父）-Vue.js-PHP中文網

淺析Vue中父子組件間怎麼通信（父傳子|子傳父）

青灯夜游

發布： 2022-11-08 20:25:38

轉載

1719 人瀏覽過

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

淺析Vue中父子組件間怎麼通信（父傳子|子傳父）

1、父元件傳遞給子元件

⭐⭐

父元件傳遞給子元件：透過props屬性；【相關推薦：vuejs影片教學、web前端開發】
子元件傳遞給父元件：透過$emit觸發事件；

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

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

淺析Vue中父子組件間怎麼通信（父傳子|子傳父）

2、淺談Props

⭐⭐
那麼什麼是Props呢？

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

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

<script>
const props = defineProps([&#39;foo&#39;])

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></show-info>
</template>

登入後複製

##showInfo.vue子元件

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

登入後複製

另外：

那麼type的型別都可以是哪些呢？

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
  }
}

登入後複製

淺析Vue中父子組件間怎麼通信（父傳子|子傳父）

##3、子元件傳遞給父元件

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

當子元件有一些事件發生的時候，例如在元件中發生了點擊，父元件需要切換內容；

子元件有一些內容想要傳遞給父元件的時候；

$emit(“add”, count)
第一個參數自訂的事件名稱，第二個參數是傳遞的參數

⭐⭐

舉一個計數器案例
#這裡我們有兩個子元件，一個父元件

子元件中定義好在某些情況下觸發的事件名稱

在父元件中以v-on（語法糖@）的方式傳入要監聽的事件名稱，並且綁定到對應的方法中；

最後，在子元件中發生某個事件的時候，根據事件名稱觸發對應的事件

1）父元件

App.vue

#父元件監聽子元件加或減的事件，透過子元件發生事件給父元件監聽

父元件監聽子元件發出的自訂事件，然後執行對應的動作

<template>
    <div>
    <h2>当前计数：{{counter}}</h2>
    <!-- 1.自定义add-counter 并且监听内部的add事件 -->
   <add-counter></add-counter>  
   <!-- 2.自定义su-counter组件，监听内部的sub事件 -->
   <sub-counter></sub-counter>
   </div>
</template>
<script>
import AddCounter from &#39;./AddCounter.vue&#39;
import SubCounter from &#39;./SubCounter.vue&#39;
    export default {
  components: { 
    AddCounter,
    SubCounter
 },
    data() {
        return {
            counter:0
        }
    },
    methods:{
        addBtnClick(count) {
            this.counter += count
        },
        subBtnClick(count) {
            this.counter -= count
        }
    }
}
</script>

登入後複製

2）子元件1
AddCounter.vue

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

<template>
    <div>
        <button>+1</button>
        <button>+5</button>
        <button>+10</button>
    </div>
</template>
<script>
    export default {
        methods:{
            btnClick(count) {
                // 让子组件发出去一个自定义事件
                // 第一个参数自定义的事件名称，第二个参数是传递的参数
                this.$emit("add",count)
            }
        }
    }
</script>

登入後複製

###3）子元件2###SubCounter.vue#########這裡定義的是計數器的減操作######子元件事件觸發之後，透過###this.$emit###的方式進行發出事件###

<template>
    <div>
        <button>-1</button>
        <button>-5</button>
        <button>-10</button>
    </div>
</template>
<script>
    export default {
        // 1.emits数组语法
       emits:["addd"],
       methods:{
        btnClick(count) {
            this.$emit("sub",count)
        }
       }
    }
</script>

登入後複製

###這個案例非常經典，可以反覆琢磨一下~######（學習影片分享：###編程基礎影片###）######

以上是淺析Vue中父子組件間怎麼通信（父傳子|子傳父）的詳細內容。更多資訊請關注PHP中文網其他相關文章！