從0開始探究vue-組件化-組件之間傳值

理解

Vue中有個很是重要的核心思想，就是組件化，組件化是爲了代碼複用

什麼是組件化

組件化，就像一個電腦主機裏的主板，有內存條的插口，有硬盤，光驅等等的插口，咱們的項目，就像一個電腦主機，經過各類組件化的模塊（硬盤、內存等），來拼合成一個完整的電腦。

（圖片來源 vue-組件化應用構建）

如圖，每個塊都是一個組件，由許許多多的組件拼合而成，能夠無限的嵌套下去

組件化的好處

1. 模塊複用，提升效率，讓重複的代碼只寫一遍。
2. 預留個性化設置，能夠保證模塊，既通用，又可變。
3. 提升可維護性，若是一個項目多個頁面使用了同一個組件（例如消息彈框），若是修改彈框樣式，只須要修改這個模塊便可。

寫法

cli模式

組件部分

<template>
  <div></div>
</template>
<script>
export default {
    name:"myAlert"
};
<style></style>

使用者部分

<template>
  <div>
    <myAlert></myAlert> <!-- 實例中使用組件 -->
  </div>
</template>

<script>
import myAlert from '@/components/alert.vue';//導入本身寫的組件
export default {
  components:{myAlert}//在這個vue實例中註冊組件
};
</script>
<style></style>

引入vue.js模式

// 定義名爲 todo-item 的新組件
Vue.component('myAlert', {
  template: '<div>這是一個彈框</div>'
})

var app = new Vue(...)

html部分使用

<div>
    <myAlert></myAlert>
</div>

組件傳值

Vue中存在的組件之間傳值的方案以下

父=>子

props

子組件中聲明props,父組件往對應的props值中傳遞

$refs

父組件使用this.$refs.組件名.變量來選中子組件並修改子組件的內容

$children

父組件使用this.$children[0].變量來選中並修改子組件的內容

須要注意的是：由官網vm.$children得知

$children 並不保證順序，也不是響應式的

因此通常不建議使用此方法來進行傳值，由於不能很穩定的找到指定組件的實例，除非這個頁面只有一個子組件

另外，此例中，this.$children[0]不是響應式的this.$children[0].變量是響應式的。

子=>父

$emit

此處爲觀察者模式

1. 子組件調用this.$emit('confirm','點擊了肯定')來派發confirm事件
2. 父組件中<myAlert @confirm='successCallback'></myAlert>來監聽事件;
   注意：此處爲，誰派發就是誰監聽，也就是說，confirm事件的派發者和監聽者，都是myAlert組件，myAlert組件監聽完畢後將調用父組件的successCallback回調事件，固然這個監聽的事件名和觸發的事件名都是能夠自定義的。

兄弟組件之間互相傳值

使用公共節點搭橋

1. 使用公共父級組件$parents或者$root

//組件一
this.$parents.$on('foo',(e)=>{
    console.log(e);//此處e爲$emit時傳入的值
})
//組件二
this.$parents.$emit('foo','bar');//控制檯輸出bar

1. 使用任意兩個組件之間傳值的方案 點擊查看

跨輩分傳值

概念，所謂跨輩分傳值，就是

祖輩->父輩->子輩->孫輩->...
其中，垮了一個輩分或多個輩分的就是跨輩分傳值，例如，祖輩及孫輩

provide/inject

因爲多級嵌套，使用props傳遞顯然是不現實的

針對這種狀況，vue提供了 provide/inject兩個API來完成這件事

1. 祖輩使用provide聲明一個變量
2. 孫輩使用inject來注入祖輩聲明的變量

寫法：

//祖輩
export default {
    provide(){//此處能夠傳入動態變量，與data相似
        return {
            componentYeye:this
        }
    },
    data(){
        return {
            yeyedeBianliang:'爺爺的變量'
        }
    }
}
//孫輩
export default {
    inject:['componentYeye'],//此處爲數組，注入祖輩聲明的變量
    mounted(){
        console.log(this.componentYeye.yeyedeBianliang);//爺爺的變量
    }
}

注意

1. 此方法多用來製做組件庫時使用。
2. 此方法不建議直接在孫輩修改祖輩的數據。由於這些數據可能在多個子組件中使用，若是要修改，應該調用祖輩組件變量的方法來修改，與vuex中建議變量修改都是用commit相似

使用任意兩個組件之間傳值的方案 點擊查看

任意兩個組件之間傳值

原型掛載

所謂原型掛載，就是在main.js中將公共變量，事件，都掛在到Vue原型上

//main.js
Vue.prototype.$globalData = {}
Vue.prototype.$sayName = function(e){
    console.log('個人名字是',e)
}
new Vue({...})

//組件一
Vue.prototype.$globalData.name='小明';
this.$sayName('小王');//個人名字是小王

//組件二
console.log(this.$sayName.name);//小明
this.$sayName('小王');//個人名字是小王

事件總線

所謂事件總線，就是在當前的Vue實例以外，再建立一個Vue實例來專門進行變量傳遞，事件處理，管理回調事件等

//main.js中
Vue.prototype.$bus = new Vue();
new Vue({...})

//組件一
this.$bus.$on('sayName',(e)=>{
    console.log('個人名字是',e)
})
//組件二
this.$bus.$emit('sayName','小明');//個人名字是 小明

vuex

Vuex是Vue提供的一種，專門用來管理vue中的公共狀態，事件等等。詳見 從0開始探究vue-公共變量的管理