vue 組件之間傳值解析

1、父子組件傳值

Ⅰ、父組件向子組件傳值
①首先先定義一個子組件，小編命名爲child，在child組件中組件props，props裏的字段可以詳細一些，也可以很簡潔
例：

<template>
    <div>
        <div>{{message}}(子組件)</div>
    </div>
</template>
<script>
export default {
//詳細定義
    props: {
		    {
		    	 message: String ,//字段類型
		    	 default:"",//默認值
		    	 require:false//是否必須
		    }
       }
//簡潔定義
props:["message"]
}
</script>

②父組件中，引入子組件，並傳入子組件內需要的值

<template>
    <div>
        <div>父組件</div>
        <child :message="parentMsg"></child>  
    </div>
</template>
 
<script>
 
import child from './child'  //引入child組件
export default {
    data() {
            return {
                parentMsg: 'a message from parent'  //在data中定義需要傳入的值
            }
        },
        components: {
            child
        }
}
</script>

Ⅱ、子組件向父組件傳值
① 先在子組件定義數據並在子組件中綁定方法

<template>
    <div>
        <div>{{message}}(子組件)</div>
        <input value="向父組件中傳遞消息" type="button" @click="sendMsg">
    </div>
</template>
<script>
export default {
//詳細定義
    props: {
		    {
		    	 message: String ,//字段類型
		    	 default:"",//默認值
		    	 require:false//是否必須
		    }
       }，
data(){
            return{
                msg: '我是子組件裏的值'
            }
        },
</script>

②在子組件中定義方法，通過emit

methods: {
            sendMsg(){
                this.$emit('func', this.msg)
            }
        }

③在父組件中定義方法

<template>
    <div>
   		 <div >父組件-----{{msgformson}}</div>
        <com1 v-bind:message="msg" @func="msgFormson"></com1>
    </div>
</template>
<script>
import com1 from "./child";
export default{
	data: {
          msg: '這是父組件中的值',
          msgformson: ''
      },
      methods: {
          msgFormson(data) {
              this.msgformson = data
              console.log(this.msgformson)
          }
      },
      components: {
          com1
      }
}
</script>

2、兄弟組件傳值：使用eventBus實現兄弟組件傳值
需求：
首先我的需求是這樣的，頁面上由top，left，main，bottom四個組件構成。需要將top中的值傳到left中。

① 創建一個js文件，eventBus.js
② eventBus.js代碼：

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

③在top組件中，引入 eventBus.js,並且在top組件中定義一個函數，以及你想要提交的事件名，例如以下，小編定義了一個函數爲一個changesize函數，當我觸發這個函數的時候，小編提交了一個add事件，並將想傳的值arg傳出去

methods:{
    changesize(){
        eventBus.$emit('add',this.arg)
    }
}

④ 在left組件中也引入eventBus.js，然後在created生命週期函數中監聽add事件，並打印出了傳過來的值

created(){
    eventBus.$on('add',(message)=>{
        //一些操作，message就是從top組件傳過來的值
        console.log(message)
    })
},

3、父組件向孫組件傳遞數據
①採用父子props層層傳遞
②使用bus和Vuex直接交互
③通過provide/inject傳遞

這對選項允許一個祖先組件向其所有子孫後代組件注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。
在父組件只要聲明瞭provide，在其子組件，孫組件，曾孫組件等能形成上下游關係的組件中交互，無論多深都能通過inject來訪問provider中的數據。
實例：

//父組件
<template>
  <div>
    <p>{{ title }}</p>
    <son></son>
  </div>
</template>
<script>
  import Son from "./son"
  export default {
    name: 'Father',
    components: { Son },
    // provide選項提供變量
    provide: {
      message: 'provided by father'
    },
    data () {
      return {
        title: '父組件'
      }
    },
    methods: { ... }
  }
</script>

//子組件
<template>
  <div>
    <p>{{ title }}</p>
    <grand-son></grand-son>
  </div>
</template>
<script>
import grandSon from "./grandSon "
export default {
  name: "Son",
  components: { grandSon },
  data () {
    return {
      title: '子組件'
    }
  },
};
</script>

//孫組件
<template>
  <div>
    <p>message：{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "GrandSon",
  inject: [ "message" ],
  data () {
    return {
      title: '孫組件'
    }
  },
  methods: { ... }
};
</script>
//結果：孫組件顯示
//message: provided by father


//選項說明
- provide 選項應該是一個對象或返回一個對象的函數。 該對象包含可注入其子孫的屬性。在該對象中，它支持ES6中Symbol作爲key，但只在原生支持等環境下可工作。
- inject 注入變量： Array<string> | { [key: string]: string | Symbol | Object }
.inject 選項可以是字符串數組、對象（key爲本地綁定名，value爲在可用的注入內容中搜索用的key或一個對象，其 from 屬性是在可用的注入內容中搜索用的key，default屬性是降級情況下使用的value
）

//注：這對選項需要一起使用。provide和inject綁定並不是可響應的，這是刻意爲之，然而如果你傳入了一個可監聽的對象，那麼其對象的屬性還是可監聽的