vue 數據通訊總結

數據單向流動prop   react也是同樣prop 

1. prop / $emit  (經常使用 父子組件傳遞)     

//父傳給子
<child :title="title"></child>

//子經過props接收
export default {
  name: 'demo',
  data: function() {},
  props: {
    title: {
      type: String
    }
  },
};

//子傳給父

methods: {
    childTitle() {
      this.$emit('changeTitle', `我給父組件的第${this.key}次`);      
    }
  }
};


//父接收

<child @changeTitle="parentTitle"></child>  //自定義事件

2. $emit / $on  （任意組件間傳遞）

建立個空的組件，來做eventbus 用來觸發及監聽事件  

// 父組件
<template>
  <div class="container">
    <child1 :Event="Event"></child1>
    <child2 :Event="Event"></child2>
    <child3 :Event="Event"></child3>
  </div>
</template>

<script>

const Event = new Vue();  //***重點

export default {
  name: "demo",
  data: function() {
    return {
      Event: Event
    };
  },
  components: {
    Child1,
    Child2,
    Child3
  },
};
</script>

// 子組件1
<template>
  <div class="center">    
    <button @click="send">我給3組件賦值</button>
  </div>
</template>

<script>
export default{
  name: "demo1",
  data() {
    return {
      name: "政採雲"
    };
  },
  props: {
    Event
  },
  methods: {
    send() {
      this.Event.$emit("message-a", this.name);  //***觸發事件
    }
  }
};
</script>


// 子組件2
<template>
  <div class="center">    
    <button @click="send">我給3組件賦值</button>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "demo2",
  data() {
    return {
      age: "3"
    };
  },
  props: {
    Event
  },
  methods: {
    send() {
      this.Event.$emit("message-b", this.age);  //***觸發事件
    }
  }
};
</script>


// 子組件3
<template>
  <div class="center">個人名字是{{name}}，今年{{age}}歲</div>
</template>

<script>
export default{
  name: 'demo3',
  data() {
    return {
      name: '',
      age: ''
    };
  },
  props: {
    Event
  },
  mounted() {
    this.Event.$on('message-a', name => {    //**** 重點： 監聽事件message-a
      this.name = name;
    });
    this.Event.$on('message-b', age => {     //**** 重點： 監聽事件message-b
      this.age = age;
    });
  },
};
</script>

能夠任意傳。  思想相似傳對象給子組件，在子組件裏修改對象的屬性   父組件裏的跟着響應

3.vuex  牛刀

集中式存儲管理應用的全部組件的狀態

Vuex 實現了一個單項數據流，經過建立一個全局的 State 數據，組件想要修改 State 數據只能經過 Mutation 來進行，頁面上的操做想要修改 State 數據時，須要經過 Dispatch (觸發 Action )，而 Action 也不能直接操做數據，還須要經過 Mutation 來修改 State 中數據，最後根據 State 中數據的變化，來渲染頁面

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    reduce(state) {
      state.count--;
    }
  },
  actions: {
    actIncrement({ commit }) {
      commit('increment');
    },
    actReduce({ commit }) {
      commit('reduce');
    }
  },
  getters: {
    doubleCount: state => state.count*2
  }
});




//vue實例
export default {
  name: "demo",
  data: function() {
    return {};
  },
  components: {},
  props: {},
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["doubleCount"])
  },
  methods: {
    ...mapActions(["actIncrement", "actReduce"])
  }
};

 

4. $attrs / $listeners

vue2.4後的新方法，增強props。

• $attrs： 包含了父做用域中不做爲 Prop 被識別 (且獲取) 的特性綁定(Class 和  Style 除外)。當一個組件沒有聲明任何 Prop 時，這裏會包含全部父做用域的綁定 (Class 和 Style 除外)，而且能夠經過 v-bind="$attrs" 傳入內部組件——在建立高級別的組件時很是有用
•   $listeners： 包含了父做用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它能夠經過 v-on="$listeners" 傳入內部組件

//父組件
 <button style="backgroundColor:lightgray" @click="reduce">減dd</button>
 <child1 :aa="aa" :bb="bb" :cc="cc" :dd="dd" @reduce="reduce"></child1>


// 子組件1
<template>
  <div>
    <div class="center">
      <p>aa:{{aa}}</p>
      <p>child1的$attrs:{{$attrs}}</p>
      <button @click="this.reduce1">組件1減dd</button>
    </div>
    <child2 v-bind="$attrs" v-on="$listeners"></child2> //寫法
  </div>
</template>

//子組件1的子組件也能夠得到子組件1的父組件的屬性和監聽

簡單來講，$attrs 裏存放的是父組件中綁定的非 props 屬性，$listeners 裏面存放的是父組件中綁定的非原生事件。  解決一級一級prop的痛點

5. Provider / Inject   須要一塊兒使用

vue2.2新增的API。容許一個祖先組件向其全部子孫注入一個依賴，不論組件層級多深，在其上下游關係成立的時間裏始終生效

// 父組件
<template>
  <div class="container">
    <button @click="this.changeName">我要更名字了</button>
    <p>個人名字：{{name}}</p>
    <child1></child1>
  </div>
</template>

<script>

export default {
  name: 'demo',
  data: function() {
    return {
      name: '節能'
    };
  },
  // provide() {
  //   return {
  //     name: this.name //這種綁定方式是不可響應的   ！注意！  
  //   };
  // },
  provide() {
    return {
      obj: this   //綁定對象
    };
  },
  components: {
    Child1
  },
  methods: {
    changeName() {
      this.name = '節能晚上';
    }
  }
};
</script>


// 子組件
<template>
  <div>
    <div class="center">
      <!-- <p>子組件名字:{{name}}</p> -->
      <p>子組件名字:{{this.obj.name}}</p>
    </div>
    <child2></child2>
  </div>
</template>

<script>

export default {
  name: 'demo1',
  data() {
    return {};
  },
  props: {},
  // inject: ["name"],  //這種方式注入，改變了name是 非響應式的，
  inject: {             //這種注入  是響應式的。 
    obj: {  
      default: () => {
        return {};
      }
    }
  },
  components: {
    child2
  },
};
</script>

簡單來講，就是父組件經過 Provider 傳入變量，任意子孫組件經過 Inject 來拿到變量。 Provide 和 Inject 綁定並非可響應的。然而，若是你傳入了一個可監聽的對象，那麼其對象的屬性仍是可響應的. 這是js對象引用類型的原故

6. $parent / $children & $refs

• $parent / $children： 指定已建立的實例之父實例，在二者之間創建父子關係。子實例能夠用 this.$parent 訪問父實例，子實例被推入父實例的 $children 數組中
• $refs： 一個對象，持有註冊過 ref 特性的全部 DOM 元素和組件實例。ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件。