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

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

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

組件之間傳值/調(diào)用方法的幾種方式
(一)父組件向子組件傳值==props
(二)子組件向父組件傳值==$emit，也可以用來調(diào)用父組件中的方法
(三)可以通過 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接收父組件傳過來的數(shù)據(jù)

props:{
     message:String
}

3.示例：

(二)子組件向父組件傳值==$emit，也可以用來調(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;
     }
}

(三)可以通過 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中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程
這篇文章主要介紹了vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程，其中聲明式router-link實(shí)現(xiàn)跳轉(zhuǎn)最簡單的方法，可用組件router-link來替代a標(biāo)簽，每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下
2022-11-11
Vue.js組件實(shí)現(xiàn)選項(xiàng)卡以及切換特效
這篇文章主要為大家詳細(xì)介紹了Vue.js組件實(shí)現(xiàn)選項(xiàng)卡以及切換特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
vue +elementui 導(dǎo)入CSV文件的方式
封裝一個(gè)公共js方法,使用papaparse解析CSV文件且返回?cái)?shù)組格式,下面通過示例代碼介紹vue +elementui 導(dǎo)入CSV文件的方式,感興趣的朋友一起看看吧
2024-04-04
Vue select 綁定動態(tài)變量的實(shí)例講解
這篇文章主要介紹了Vue select 綁定動態(tài)變量的實(shí)例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue3?hook自動導(dǎo)入原理及使用
最近學(xué)習(xí)了hooks,特地寫一篇文章加深一下印象,下面這篇文章主要給大家介紹了關(guān)于vue3?hook自動導(dǎo)入原理及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
vite+vue3搭建的工程實(shí)現(xiàn)批量導(dǎo)入store的module
這篇文章主要介紹了vite+vue3搭建的工程實(shí)現(xiàn)批量導(dǎo)入store的module方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
解決@vue/cli安裝成功后,運(yùn)行vue -V報(bào):不是內(nèi)部或外部命令的問題
這篇文章主要介紹了解決@vue/cli安裝成功后,運(yùn)行vue -V報(bào):不是內(nèi)部或外部命令的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue網(wǎng)絡(luò)請求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請求的三種實(shí)現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-09-09
一文輕松了解v-model及其修飾符
這篇文章主要給大家介紹了關(guān)于v-model及其修飾符的相關(guān)資料,v-model指令有三個(gè)可以選用的修飾符：.lazy、.number以及.trim,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-11-11
elementui[el-table]toggleRowSelection默認(rèn)多選事件無法選中問題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認(rèn)多選事件無法選中問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11