vue組件傳值的方法有哪些

vue組件傳值的方法：1、父向子傳值使用props；2、子向父傳值使用“$emit”；3、使用EventBus或Vuex進行兄弟傳值；4、使用“provide/inject”或“$attrs/$listeners”方法進行跨級傳值。

本教程操作環境：windows7系統、vue2.9.6版、Dell G3電腦。

我們都知道 Vue 作為一個輕量級的前端框架，其核心就是組件化開發。Vue 就是由一個一個的組件構成的，組件化是它的精髓，也是最強大的功能之一。而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。

但在實際項目開發過程中，我們需要訪問其他組件的數據，這樣就就有了組件通信的問題。在 vue 中組件之間的關系有：父子，兄弟，隔代。針對不同的關系，怎么實現數據傳遞，就是接下來要講的。

一、父組件向子組件傳值

即父組件通過屬性的方式向子組件傳值，子組件通過 props 來接收。

• 在父組件的子組件標簽中綁定自定義屬性

• // 父組件 <user-detail :myName="name" />      export default {     components: {         UserDetail     }     ...... }

• 在子組件中使用props（可以是數組也可以是對象）接收即可。可以傳多個屬性。

• // 子組件 export default {     props: ['myName'] }  /* props: { myName: String } //這樣指定傳入的類型，如果類型不對會警告 props: { myName: [String, Number] } // 多個可能的類型 prosp: { myName: { type: String, requires: true } } //必填的的字符串 props: {      childMsg: {          type: Array,          default: () => []      } }  // default指定默認值 如果 props 驗證失敗，會在控制臺發出一個警告。 */

子組件接收的父組件的值分為引用類型和普通類型兩種：

　　普通類型：字符串（String）、數字（Number）、布爾值（Boolean）、空（Null）

　　引用類型：數組（Array）、對象（Object）

基于 vue 的單向數據流，即組件之間的數據是單向流通的，子組件是不允許直接對父組件傳來的值進行修改的，所以應該避免這種直接修改父組件傳過來的值的操作，否則控制臺會報錯。

• 如果傳過來的值是簡單數據類型，是可以在子組件中修改，也不會影響其他兄弟組件內同樣調用了來自該父組件的值。

  具體操作是可以先把傳過來的值重新賦值給data中的一個變量，然后再更改那個變量。

• // 子組件 export default {     props: ['myName'],     data() {         return {             name : this.myName    // 把傳過來的值賦值給新的變量         }     },     watch: {         myName(newVal) {             this.name = newVal //對父組件傳過來的值進行監聽，如果改變也對子組件內部的值進行改變         }     },     methods: {         changeName() {               this.name = 'Lily'  // 這里修改的只是自己內部的值，就不會報錯了         },     } }

  注：如果不使用 watch 來監聽父組件傳遞的 myName 值，子組件中的 name 值是不會隨著父組件的 myName 值進行改變，因為 data 中 name: this.myName 僅僅只是定義了一個初始值。

• 如果引用類型的值，當在子組件中修改后，父組件的也會修改，因其數據是公用的，其他同樣引用了該值的子組件也會跟著被修改。可以理解成父組件傳遞給子組件的值，就相當于復制了一個副本，這個副本的指針還是指向父組件中的那個，即共享同一個引用。所以除非有特殊需要，否則不要輕易修改。

二、子組件向父組件傳值

1、子組件綁定一個事件，通過 this.$emit() 來觸發

在子組件中綁定一個事件，并給這個事件定義一個函數

// 子組件 <button @click="changeParentName">改變父組件的name</button>  export default {     methods: {         //子組件的事件         changeParentName: function() {             this.$emit('handleChange', 'Jack') // 觸發父組件中handleChange事件并傳參Jack             // 注：此處事件名稱與父組件中綁定的事件名稱要一致         }     } }

在父組件中定義并綁定 handleChange 事件

// 父組件 <child @handleChange="changeName"></child>  methods: {     changeName(name) {  // name形參是子組件中傳入的值Jack         this.name = name     } }

2、通過 callback 函數

先在父組件中定義一個callback函數，并把 callback 函數傳過去

// 父組件 <child :callback="callback"></child> methods: {     callback: function(name) {        this.name = name     } }

在子組件中接收，并執行 callback 函數

// 子組件 <button @click="callback('Jack')">改變父組件的name</button> props: {     callback: Function, }

3、通過 $parent / $children 或 $refs 訪問組件實例

這兩種都是直接得到組件實例，使用后可以直接調用組件的方法或訪問數據。

// 子組件 export default {   data () {     return {       title: '子組件'     }   },   methods: {     sayHello () {         console.log('Hello');     }   } }

// 父組件 <template>   <child ref="childRef" /> </template>  <script>   export default {     created () {       // 通過 $ref 來訪問子組件       console.log(this.$refs.childRef.title);  // 子組件       this.$refs.childRef.sayHello(); // Hello              // 通過 $children 來調用子組件的方法       this.$children.sayHello(); // Hello      }   } </script>

注：這種方式的組件通信不能跨級。

4. $attrs / $listeners 詳解點這里

三、兄弟組件之間傳值

1、還是通過 $emit 和 props 結合的方式

在父組件中給要傳值的兩個兄弟組件都綁定要傳的變量，并定義事件

// 父組件 <child-a :myName="name" /> <child-b :myName="name" @changeName="editName" />        export default {     data() {         return {             name: 'John'         }     },     components: {         'child-a': ChildA,         'child-b': ChildB,     },     methods: {         editName(name) {             this.name = name         },     } }

在子組件B中接收變量和綁定觸發事件

// child-b 組件 <p>姓名：{{ myName }}</p> <button @click="changeName">修改姓名</button>      <script> export default {     props: ["myName"],     methods: {         changeName() {             this.$emit('changeName', 'Lily')   // 觸發事件并傳值         }     } } </script>

// child-a 組件 <p>姓名：{{ newName }}</p>      <script> export default {     props: ["myName"],     computed: {         newName() {             if(this.myName) { // 判斷是否有值傳過來                 return this.myName             }             return 'John' //沒有傳值的默認值         }     } } </script>

即：當子組件B 通過 $emit() 觸發了父組件的事件函數 editName，改變了父組件的變量name 值，父組件又可以把改變了的值通過 props 傳遞給子組件A，從而實現兄弟組件間數據傳遞。

2. 通過一個空 vue 實例

創建一個 EventBus.js 文件，并暴露一個 vue 實例

import Vue from 'Vue'export default new Vue()

在要傳值的文件里導入這個空 vue 實例，綁定事件并通過 $emit 觸發事件函數

(也可以在 main.js 中全局引入該 js 文件，我一般在需要使用到的組件中引入)

<template>     <div>         <p>姓名: {{ name }}</p>         <button @click="changeName">修改姓名</button>     </div> </template>  <script> import { EventBus } from "../EventBus.js"  export default {  data() {      return {          name: 'John',      }   },   methods: {       changeName() {           this.name = 'Lily'           EventBus.$emit("editName", this.name) // 觸發全局事件,并且把改變后的值傳入事件函數       }     } } </script>

在接收傳值的組件中也導入 vue 實例，通過 $on 監聽回調，回調函數接收所有觸發事件時傳入的參數

import { EventBus } from "../EventBus.js"  export default {     data() {         return {             name: ''         }     },     created() {          EventBus.$on('editName', (name) => {              this.name = name          })     } }

這種通過創建一個空的 vue 實例的方式，相當于創建了一個事件中心或者說是中轉站，用來傳遞和接收事件。這種方式同樣適用于任何組件間的通信，包括父子、兄弟、跨級，對于通信需求簡單的項目比較方便，但對于更復雜的情況，或者項目比較大時，可以使用 vue 提供的更復雜的狀態管理模式 Vuex 來進行處理。

3. 使用 vuex →點這里

四、多層父子組件通信

有時需要實現通信的兩個組件不是直接的父子組件，而是祖父和孫子，或者是跨越了