腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

vue組件間傳值的方法你知道幾種

更新時(shí)間：2022年02月11日 10:32:21 作者：最好的我們，

這篇文章主要為大家詳細(xì)介紹了vue組件間傳值的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

一丶父子組件傳值

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

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

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

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

二丶子父組件傳值

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

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

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

三丶兄弟組件傳值

事件總線:

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

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

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

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

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

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

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

注意：$on先進(jìn)行監(jiān)聽，一旦$emit發(fā)布事件后所有組件都可以$on監(jiān)聽到事件。所以傳遞參數(shù)的時(shí)候一定已經(jīng)先進(jìn)行了監(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對(duì)象完成的，與組件無(wú)關(guān)，如果用v-if銷毀子組件的時(shí)候，會(huì)形成閉包，造成內(nèi)存泄露，所有要在銷毀組件的時(shí)候進(jìn)行取消監(jiān)聽事件

具體形成原因點(diǎn)擊查看

四丶$parent /$children與ref

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

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

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

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

this.$parent.switchLoadPage();

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

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

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

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

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

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

總結(jié)

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片