目錄

1.vue2通過$parent實現組件傳值——父傳子

2.vue2 通過$children實現組件傳值——子傳父

3.?provide和inject傳值（依賴注入）

4.vue2如何操作dom

5.vue2如何拿到最新的dom

6.filters過濾器

7.vue2的生命周期?

8.vuex的用法

---

1.vue2通過$parent實現組件傳值——父傳子

通過$parent我們可以獲得父組件的整個實例對象，然后就可以直接調用this的方法和數據，不用再通過標簽內部傳遞指定的值。

 <p>{{$parent.a }}</p>
console.log(this.$parent);console.log(this.$parent.a);

2.vue2 通過$children實現組件傳值——子傳父

$children可以在父組件中獲取子組件里面的數據和方法。因為父組件里面可以有好幾個子組件，所以通過this.$children輸出結果是一個數組，然后需要調用那個子組件的方法就調用那個子組件的方法。

 this.$children[0].adddata1()

3.?provide和inject傳值（依賴注入）

嵌套組件傳值，由父組件提供數據，子組件注入數據，和vue3的用法是一樣的，都是只能實現單項數據傳值。在父組件中需要將傳遞的值寫到provide選項中，注意：return結束后要加分號

傳遞非響應式數據，可以通過對象的形式進行傳值。

  //   傳遞非響應式數據provide: {b: 200,},

傳遞響應式數據：

 provide() {return {num: () => this.a,};},

在子頁面中進行注入操作 ，但是注入后不能直接使用，需要通過計算屬性來返回一個新的屬性，才可以使用，否則無法實現響應式的效果

注入非響應式數據：

  //   注入數據inject: ['b'],

?注入響應式數據：

 //   注入數據inject: ["num",'b'],//  通過計算屬性來實現響應式的效果computed: {newnum() {return this.num();},},

4.vue2如何操作dom

在vue2中可以通過給標簽設置ref屬性給dom元素或者是子組件指定一個引用名稱，然后在組件的實例中通過$refs訪問該引用，從而操作dom元素。

<template><div><button ref="myButton" @click="handleClick">Click me</button></div>
</template><script>
export default {methods: {handleClick() {// 使用 $refs 訪問 DOM 元素this.$refs.myButton.innerText = 'Clicked!';},},
};
</script>

5.vue2如何拿到最新的dom

在vue2中可以通過this.$nextTick來獲取最新的dom。

    but() {this.$refs.pdom.innerHTML = "aaa";this.$nextTick(() => {console.log(this.$refs.pdom);});},

6.filters過濾器

主要用來過濾數據，可以同時調用多個過濾器? eg：?<p>{{ arr | guolvqi | guolvqi2 | guolvqi3 }}</p>

<template><div class="about"><p>{{ arr | guolvqi }}</p></div>
</template>
<script>
export default {name: "aboutViem",data() {return {arr: [1, 2, 3, 4, 5, 5, 6],};},filters: {guolvqi(arr) {//過濾出數組內的偶數return arr.filter((num) => num % 2 == 0);},},
};
</script>

注意：只有vue2中有過濾器，vue3中沒有過濾器。

7.vue2的生命周期?

1. beforeCreate：

   • 在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
   • 在這個階段，實例的數據觀測和事件配置都未被初始化，因此無法訪問?data、computed、methods?等選項中定義的內容。
   • 此時this剛剛被創建完成，組件中的data、methods還沒有往this上進行掛載。

2. created：

   • 在實例創建完成后被立即調用。
   • 在這個階段，實例已完成數據觀測 (data observer)，屬性和方法的運算，watch/event?事件回調也已經初始化完成。
   • 此時this完成了data、methods的掛載，可以訪問到?data、computed、methods?等選項中定義的內容。在這個生命周期中就可以發送組件的初始化請求了，將請求結果保存到響應式數據data中。

3. beforeMount：

   • 在掛載開始之前被調用：相關的?render?函數首次被調用。

4. mounted：

   • el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。
   • 如果根實例掛載到了一個文檔內的元素上，當 mounted 被調用時 vm.$el 也在文檔內。
   • mounted 不會保證所有的子組件也都一起被掛載。
   • 組建的初始化請求，最早可以放在created中，最晚可以放在mounted里面。? ?
   • 此時 組件掛載完畢，頁面渲染完成。可以操作dom了（也是最早操作dom的時間）。?

5. beforeUpdate：

   • 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。
   • 在該鉤子中，你可以進一步地更改狀態，不會導致重渲染。

6. updated：

   • 由于數據更改導致的虛擬 DOM 重新渲染和打補丁之后調用。
   • 當該鉤子被調用時，組件 DOM 已經更新，可以執行依賴于 DOM 的操作。

7. beforeDestroy：

   • 在實例銷毀之前調用。實例仍然完全可用。
   • 通常在這一步做一些清理工作，比如清除定時器、解綁全局事件等等。

8. destroyed：

   • 在實例銷毀之后調用。Vue 實例指示的所有東西都被解綁定，所有的事件監聽器被刪除。
   • 該階段 Vue 實例完全銷毀。

8.vuex的用法

用來全局共享響應式數據的，一個頁面修改了數據其他頁面也會跟著一塊更新。

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {//   聲明響應式數據的地方address:'鄭州 '},getters: {},mutations: {//   在這里定義修改state數據的方法，必須是同步修改，是同步任務，不能寫異步任務setAddress(state,val) {state.address = val;// // 通過this.$store.commit("方法名",參數)可以觸發mutations中的方法}},actions: {//   寫異步任務 做優化getlocation(context) {console.log(context);//context相當于Store對象，如果需要調用本頁面的方法和數據可以通過Store來完成任務context.commit('setAddress', '杭州')// 通過this.$store.dispatch("方法名",參數)可以觸發actions中的方法// actions使用的條件：1.異步任務；2.任務的結果必須存儲到vuex中 }},modules: {//   用來封裝Vuex,一般用不到  }
})

在組件中可以通過? $store.state.address來調用vuex中定義的數據

  <p @click="setaddress">vuex:{{ $store.state.address }}</p>

修改vuex中的值有兩種方法

 setaddress() {// 改值方法一;//   this.$store.state.address = "北京";//   改值方法二： 調用vuex的方法this.$store.commit("setAddress", "上海");},