1. 資料：Vue.set 和 Vue.delete
在Vue2.x中，當一個Vue實體創建好了以后，如果想要后續給該實體的某一個data添加屬性，該屬性是不會觸發視圖更新的，解決方法是使用Vue.set或者vm.$set方法添加指定屬性，
例如
<template>
<div>
<p>foo.a is {{foo.a}}</p>
<p>foo.b is {{foo.b}}</p>
<button @click="foo.a = 111">change a to 111</button>
<button @click="foo.b = 111">change b to 111</button>
</div>
</template>
<script>
export default {
data() {
return {
foo: { a: 123 }
}
},
created() {
//在Vue實體創建成功，但是還未掛載到dom樹之前給foo增加b屬性，
this.foo.b = 456;
}
}
</script>
以上代碼在Vue實體創建成功，但是還未掛載到dom樹之前給foo增加b屬性，此時再頁面上可以正常看到foo.a，但是點擊修改foo.b頁面并不會發生變化，
正確的寫法
created() {
this.$set(this.foo, 'b', 456);
//或者
Vue.set(this.foo, 'b', 123);
//對于陣列，第二個引數是下表
}
同樣的，想要洗掉一個屬性并觸發視圖更新，并不能直接使用delete，而要用Vue.delete(target, propertyName/index) 或者vm.$delete(target, propertyName/index)，
但是，目前在Vue3中，直接使用this.foo.b = 456也一樣可以觸發視圖更新，也可以直接使用delete洗掉屬性，
2. 事件：vm.$on $emit $once $off
vm.$emit和vm.$on是基于發布訂閱模式的，常用在子組件向父組件派發事件的時候使用，在子組件上使用@xxx="callback"指令即可，但是除了這種方法，也可以直接在子組件中使用vm.$on也可以觸發vm.$emit派發的事件，需要注意的是在哪個組件派發就應該在哪個組件訂閱，即事件的派發者既是事件的訂閱者，
vm.$emit('test', 'hello'); //派發事件
vm.$on('test', (msg) => { //訂閱事件
console.log(msg);
})
基于這兩個api，可以實作一個簡單的跨組件通信的方法：事件總線，原理是在Vue的原型上添加一個Vue實體，之后所有組件都可以通過這個Vue實體進行發布訊息和訂閱訊息，
Vue.prototype.$bus = new Vue();
const vm1 = new Vue({...});
const vm2 = new Vue({...});
vm1.$bus.$emit('test', 'hello'); //vm1派發事件
vm2.$bus.$on('test', (msg) => { //vm2訂閱事件
console.log(msg);
})
vm.$once和vm.$on差不多，區別在于前者在監聽到一次事件后就會將該事件移除，
vm.$off用于移除事件監聽器
-
如果沒有提供引數，則移除所有監聽器，
-
如果提供了事件的名稱，則移除該事件所有的監聽器，
-
如果提供了事件名稱與回呼參考，則移除這個回呼的監聽器，
vm.$off(); //移除所有的事件監聽器
vm.$off('test'); //移除該事件所有的監聽器
vm.$off('test', callback); //只移除這個回呼的監聽器
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/209590.html
標籤：其他
上一篇：JS陣列去重的9種方法（包括去重NaN和復雜陣列型別）
下一篇：web頁生成條碼