一丶父子組件傳值

先在父組件中給子組件的自定義屬性綁定一個 父組件的變量

<template class="father">
   <child :自定義屬性名="父組件的變量"></child> 
<template >

在子組件的props屬性中可以取出父組件給的值，props中的變量用法和data中變量用法完全一樣，只不過值的來源不同

export default {
	name: "child",
	props: ["自定義屬性名"],
    data() {}
}

二丶子父組件傳值

先在父組件中給子組件的 自定義屬性 綁定一個父組件的函數(shù)

<template class="father">  
	<child  @自定義事件="父的處理函數(shù)">
<template >
export default {
	name: "father",
	data() {}
	methods:{
		父的處理函數(shù)(參數(shù)){
            //參數(shù)：得到子組件觸發(fā)事件($emit)時，傳遞過來的數(shù)據(jù)
        }
    }
})

在子組件中 this.$emit(“父的處理函數(shù)”,this.數(shù)據(jù)) 觸發(fā)父組件中的函數(shù)進行傳參

三丶兄弟組件傳值

事件總線:

就是創(chuàng)建一個事件中心，相當于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件

創(chuàng)建全局空Vue實例：eventBus

import Vue from 'vue';
const eventBus= new Vue()  //創(chuàng)建事件總線
export default eventBus;

具體頁面使用$emit發(fā)布事件 - 傳遞值

import eventBus from '@u/eventBus'
eventBus.$emit('send',‘hello')

具體頁面使用$on訂閱事件 - 接收組件值

import eventBus from '@u/eventBus'
eventBus.$on('send', msg => {
	console.log(msg)  //控制臺輸出 hello
}

注意：$on先進行監(jiān)聽，一旦$emit發(fā)布事件后所有組件都可以$on監(jiān)聽到事件。所以傳遞參數(shù)的時候一定已經(jīng)先進行了監(jiān)聽才能得到參數(shù)。比如在父組件中$emit事件放在mounted鉤子函數(shù)中，等待子組件創(chuàng)建并$on開始監(jiān)聽事件后再去觸發(fā)$emit發(fā)布事件。

$off()移除事件監(jiān)聽

import eventBus from '@u/eventBus'
eventBus.$off('send')  

事件訂閱功能$on是$eventBus對象完成的，與組件無關(guān)，如果用v-if銷毀子組件的時候，會形成閉包，造成內(nèi)存泄露，所有要在銷毀組件的時候進行取消監(jiān)聽事件

具體形成原因點擊查看

四丶$parent /$children與ref

$parent方法是在子組件中可以直接訪問該組件的父實例或組件。

在父組件中定義一個切換顯示頁面執(zhí)行中的顯示方法。

switchLoadPage(msg) {
    if(!this.loading && msg)
  		this.loadtext=msg;
  		this.loading = !this.loading;
},

? 在子組件中直接通過$parent去調(diào)用該方法

this.$parent.switchLoadPage();

$children方法是在父組件中可以直接訪問子組件的實例，但是不保證子組件的順序。

ref 被用來給DOM元素或子組件注冊引用信息。引用信息會根據(jù)父組件的 $refs 對象進行注冊。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子組件上，引用信息就是組件實例。

在父組件中自定義一個表格組件，給子組件加上 ref屬性

<result ref="result" :config="dgConfig"  ></result>

在父組件中就可以通過this.$refs.result去找到result子組件進行操作,比如把父組件的sdata直接放入子組件中

methods: {
  	info(){
   		this.$refs.result.sdata = this.sdata;
    },
}

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!        

最新評論