Vue 組件間傳值

VishKozus 發布于2019-08-23 15:07 / 3188人閱讀

摘要：前言作為現在比較火的框架之一，相信您在使用的過程中，也會遇到組件間傳值的情況，本文將講解幾種組件間傳值的幾種方法，跟著小編一起來學習一下吧實現注意學習本文，需要您對有一定的了解。為了便于講解，以下方法均假設父組件是，子組件是，兄弟組件是。

前言

Vue 作為現在比較火的框架之一，相信您在使用的過程中，也會遇到組件間傳值的情況，本文將講解幾種 Vue 組件間傳值的幾種方法，跟著小編一起來學習一下吧！

實現

注意：學習本文，需要您對 Vue 有一定的了解。

為了便于講解，以下方法均假設父組件是 FatherComponent，子組件是 ChildComponent，兄弟組件是：BrotherComponent。我們來假定一種場景：點擊父組件“傳遞給子組件”按鈕，向子組件傳遞一條消息“I am your father.”；點擊子組件“傳遞給父組件”按鈕，向父組件傳遞一條消息“I am your child.”；點擊子組件“傳遞給兄弟組件”按鈕，向兄弟組件傳遞一條消息“I am your brother.”

1. 方法一

關鍵詞： props、$emit

父組件 FatherComponent 代碼：

子組件 ChildComponent 代碼：

兄弟組件 BrotherComponent 代碼：

通過上面代碼，不難發現，我們通過使用 props 來實現父組件給子組件傳值；子組件向父組件傳值時，借助 $emit 來實現；而子組件向兄弟組件傳值時，將兩者結合起來使用。

2. 方法二

關鍵詞：獨立的事件中心 eventHub

首先需要先創建 eventHub.js 文件，代碼如下：

// 將在各處使用該事件中心
// 組件通過它來通信
import Vue from "vue"
export default new Vue()

然后在組件中，可以使用 $emit, $on, $off 分別來分發、監聽、取消監聽事件。

父組件 FatherComponent 代碼：

子組件 ChildComponent 代碼：

兄弟組件 BrotherComponent 代碼：

3. 方法三

關鍵詞：Vuex

我們需要創建 store.js 來存放數據：

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    fromFatherInfo: "",
    fromChildInfo: "",
    fromBrotherInfo: ""
  },
  mutations: {
    changeFromFatherInfo (state, fromFatherInfo) {
      state.fromFatherInfo = fromFatherInfo
    },
    changeFromChildInfo (state, fromChildInfo) {
      state.fromChildInfo = fromChildInfo
    },
    changeFromBrotherInfo (state, fromBrotherInfo) {
      state.fromBrotherInfo = fromBrotherInfo
    }
  }
})

實例化：

import Vue from "vue"
import App from "./App"
import store from "./store"

new Vue({
  el: "#app",
  store,
  template: "",
  components: { App }
})

父組件 FatherComponent 代碼：

子組件 ChildComponent 代碼：

兄弟組件 BrotherComponent 代碼：

GPU云服務器云服務器間傳值網頁間傳值頁面間傳值兩個html間傳值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101525.html

Vue2從0到1(四)：Vue組件化及組件間傳值

摘要：前面講了環境的搭建用打包和的使用以及的使用下面講一下組件化及組件間傳值主要包括父子組件間傳值，兄弟組件間傳值，不相關組件間傳值。組件化及組件間傳值組件化組件是最強大的功能之一。前面講了環境的搭建用webpack打包vue和Vue-router的使用以及vuex的使用下面講一下Vue組件化及組件間傳值：主要包括父子組件間傳值，兄弟組件間傳值，不相關組件間傳值。 10.Vue組件...

geekzhou 2019-08-21 17:04 評論0 收藏0
vue 組件間傳值

摘要：父組件給子組件傳值父組件二哈子組件子組件給父組件父組件子組件點擊啦啦啦啦定義狀態中引入傳值取值地址傳值 1、父組件給子組件傳值父組件： import child from ./child.vue export default { components: {child}, data(){ return {name:二哈} } ...

sourcenode 2019-08-23 14:02 評論0 收藏0
關于vue中組件傳值的一些問題

摘要：一父子組件之間的傳值父組件傳遞給子組件需要在子組件中通過接收值子組件傳遞給父組件自定義事件，要傳輸的值子父在子組件中需要通過點擊事件傳遞給父組件值，點擊事件觸發后，通過自定義事件，要傳遞的值注意在父組件接收時必須在對應的子組件接收相應一：父子組件之間的傳值** 父組件傳遞給子組件：需要在子組件中通過props接收值子組件傳遞給父組件：$emit(自定義事件，要傳輸的值) 子--->父...

chnmagnus 2019-08-26 10:44 評論0 收藏0
React Native 傳參的五種方式

摘要：在中由于業務的需要我們往往要在諸多的頁面間，組件之間做一些參數的傳遞與管理在這里我總結了幾大經過驗證，穩定好用的方式給大家導航傳值推薦指數適用范圍相鄰頁面間傳值兼容性原理為頁面的上掛載了對象可用來做路由跳轉，在做頁面跳轉時可以攜帶參數回調方在React Native 中由于業務的需要, 我們往往要在諸多的頁面間，組件之間做一些參數的傳遞與管理, 在這里我總結了幾大經過驗證，穩定好用的...

cnTomato 2019-08-26 13:52 評論0 收藏0
理清楚Vue的結構

摘要：的使用場景在中通過引入在中，由于配置有處理各種文件的，所以可以用引入指令簡單值，數組，對象，數組中對象數組，對象自定義全局指令自定義指令名字指令生效周期配置對象被綁定的那個元素的原生對象一旦綁上馬上調用同上元素插入到之后再 1.Vue的使用場景： * 在html中通過script引入 * 在webpack中，由于配置有處理各種文件的loader，所以可以用import引入 2.Vu...

terro 2019-08-23 15:19 評論0 收藏0