Vue組件之間傳值/調(diào)用幾種方式

更新時(shí)間：2022年12月02日 14:28:58 作者：來(lái)干了這碗代碼

這篇文章主要介紹了Vue組件之間傳值/調(diào)用的幾種方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

組件之間傳值/調(diào)用方法的幾種方式
(一)父組件向子組件傳值==props
(二)子組件向父組件傳值==$emit，也可以用來(lái)調(diào)用父組件中的方法
(三)可以通過(guò) p a r e n t 和 parent和 parent和children獲取父子組件參數(shù)
(四)兄弟之間傳值===Vuex
(五)父組件調(diào)用子組件的方法===ref
推薦

組件之間傳值/調(diào)用方法的幾種方式

(一)父組件向子組件傳值==props

1.在父組件中使用子組件的地方綁定數(shù)據(jù)

<children :message="message"></children>

2.子組件使用props接收父組件傳過(guò)來(lái)的數(shù)據(jù)

props:{
     message:String
}

3.示例：

(二)子組件向父組件傳值==$emit，也可以用來(lái)調(diào)用父組件中的方法

1.子組件直接使用$emit將內(nèi)部數(shù)據(jù)傳遞給父組件

this.$emit("childByValue",this.childValue);

2.父組件中接收數(shù)據(jù)

<template>
     <child @childByVlaue="childByVlaue"></dhild>
</template>
methods:{
     childByValue:function(childValue){
          this.name=childValue;
     }
}

(三)可以通過(guò) p a r e n t 和 parent和 parent和children獲取父子組件參數(shù)

$children[i].params

this.$parent.params

(四)兄弟之間傳值===Vuex

1.在state里定義數(shù)據(jù)和屬性

state: {
    userName: '',
  },

2.在mutation里定義函數(shù)

mutations: {
    setUserName(state, name) {
      state.userName = name
    },
},

3.設(shè)置值

this.$store.comit('setUserName',params)

4.獲取值

this.$store.state.user.userName

(五)父組件調(diào)用子組件的方法===ref

1.子組件的方法

methods:{
     childMethod(){
          alert("我是子組件的方法");
     }
}

2.父組件調(diào)用子組件的方法

<template>
     <child ref="child"></child>
     <div @click="parentMethod"></div>
</template>
methods:{
     parentMethod(){
          this.$refs.child.childMethod();
     }
}

相關(guān)文章

前端VUE雙語(yǔ)實(shí)現(xiàn)方案詳細(xì)教程
在項(xiàng)目需求中我們會(huì)遇到國(guó)際化的中英文切換,這篇文章主要給大家介紹了關(guān)于前端VUE雙語(yǔ)實(shí)現(xiàn)方案的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析
Vue提供了一種稱為函數(shù)式組件的組件類型,用來(lái)定義那些沒(méi)有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場(chǎng)景,它只接受一些props來(lái)顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析的相關(guān)資料,需要的朋友可以參考下
2021-11-11
Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁(yè)面-計(jì)算頁(yè)面尺寸
這篇文章主要介紹了Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁(yè)面-計(jì)算頁(yè)面尺寸，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
詳解vue.js2.0父組件點(diǎn)擊觸發(fā)子組件方法
本篇文章主要介紹了詳解vue.js2.0父組件點(diǎn)擊觸發(fā)子組件方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
vue 使某個(gè)組件不被 keep-alive 緩存的方法
今天小編就為大家分享一篇vue 使某個(gè)組件不被 keep-alive 緩存的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue數(shù)據(jù)監(jiān)聽(tīng)器watch和watchEffect的使用
今天我們來(lái)學(xué)習(xí)一下watch監(jiān)聽(tīng)器和它的好兄弟watchEffect監(jiān)聽(tīng)器。這個(gè)相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，用的不是很多，當(dāng)然了，根據(jù)自己的項(xiàng)目情況自行決定使用，希望對(duì)大家有所幫助
2023-02-02
vxe-table vue table 表格組件功能
這篇文章主要介紹了vxe-table vue table 表格組件功能，功能非常強(qiáng)大，文中給大家提到了功能點(diǎn),需要的朋友可以參考下
2019-05-05
解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問(wèn)頁(yè)面顯示空白問(wèn)題
這篇文章主要介紹了解決vue3項(xiàng)目打包發(fā)布到服務(wù)器后訪問(wèn)頁(yè)面顯示空白問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
VUE獲取Promise對(duì)象中PromiseResult中的數(shù)據(jù)(最新推薦)
如果想要在接口請(qǐng)求方法的外面拿到請(qǐng)求的結(jié)果,再做相關(guān)數(shù)據(jù)處理,往往我們拿到的卻是一個(gè)Promise對(duì)象,那么遇到這樣的問(wèn)題如何解決呢,下面小編給大家?guī)?lái)了VUE?項(xiàng)目中?如何獲取Promise對(duì)象中的PromiseResult中的數(shù)據(jù)?,感興趣的朋友一起看看吧
2023-10-10
vue實(shí)現(xiàn)翻牌動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)翻牌動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04