vue2總結一些小功能
阿新 • • 發佈：2019-01-03
一 、keep-alive
實現router切換狀態保留 如果載入的資料ok 就不用重複載入了。程式碼示例
| 123456789101112131415 |
<template> <div class="tab"> <router-link class="tab-item" to="/goods" tag="li" active-class="active"> <a href="javascript:;">商品</a> </router-link> </div> <div> <!--實現router切換狀態保留 果載入的資料ok 就不用重複載入了--> <keep-alive> <!--:seller="seller" |
二 、ref 引用指向 DOM節點
ref 被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的 $refs 物件上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件例項：
| 12345 |
<div id="parent"> <user-profile ref="profile" |
關於 ref 註冊時間的重要說明：因為 ref 本身是作為渲染結果被建立的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，應當避免在模板或計算屬性中使用 $refs。
三、Vue.nextTick( [callback, context] )
非同步更新佇列、為了在資料變化之後等待 Vue 完成更新 DOM可以在資料變化之後立即使用 Vue.nextTick(callback) 。這樣回撥函式在 DOM 更新完成後就會呼叫
| 1234567891011121314151617 | Vue.component('example', { template: '<span>{{ message }}</span>', data: function () { return { message: '沒有更新' } }, methods: { updateMessage: function () { this.message = '更新完成' console.log(this.$el.textContent) // => '沒有更新' this.$nextTick(function () { console.log(this.$el.textContent) // => '更新完成' }) } }}) |
四 、set 全域性操作
對於已經建立的例項，Vue 不能動態新增根級別的響應式屬性。但是，可以使用 Vue.set(object, key, value) 方法向巢狀物件新增響應式屬性
| 12345678910 | var vm = new Vue({ data: { userProfile: { name: 'Anika' } }})//你可以新增一個新的 age 屬性到巢狀的 userProfile 物件或者更改：Vue.set(vm.userProfile, 'age', 27);Vue.set(vm.userProfile, 'name', 'tom'); |
有時你可能需要為已有物件賦予多個新屬性，在這種情況下，應該用兩個物件的屬性建立一個新的物件
| 1234 | this.userProfile = Object.assign({}, this.userProfile, { age: 27, favoriteColor: 'Vue Green'}) |
五 、Vue.filter( id, [definition] )自定義過濾器
註冊或獲取全域性過濾器。
| 123456789 | // 註冊Vue.filter('my-filter', function (value) { // 返回處理後的值 return ；})// getter，返回已註冊的過濾器var myFilter = Vue.filter('my-filter')}) |
六 、Vue.directive( id, [definition] )自定義屬性指令
| 12345678910111213141516 | // 註冊Vue.directive('my-directive', { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {}})// 註冊 (指令函式)Vue.directive('my-directive', function () { // 這裡將會被 `bind` 和 `update` 呼叫})// getter，返回已註冊的指令var myDirective = Vue.directive('my-directive') |
七 、 自定義外掛 Vue.use( plugin )
| 12345678910 | import StarComponent from './star.vue'const Star_ing = { install: function(Vue) { Vue.component('Star_', StarComponent) }}export default Star_ingVue.use(Star)//使用外掛//呼叫外掛<Star_></Star_> |
八 、使用 Prop 傳遞資料
| 12345678910 | //父元件<router-view :seller="seller"></router-view>//子元件 export default { props: { seller: { type: Object } } } |
九 、$emit 觸發事件
- $emit是觸發當前例項上的事件。附加引數都會傳給監聽器回撥。
- 非父子元件的通訊 https://cn.vuejs.org/v2/guide/components.html#非父子元件的通訊
1234567891011121314151617 //子元件export default{ methods:{ click:function(){ // 子元件通過 $emit觸發父元件的add方法 this.$emit('add', event.target); } }}//父元件<cartcontrol @add="addFood" :food="food"></cartcontrol>export default{ addFood(target) { this._drop(target); },}
使用 $on(eventName) 監聽事件
使用 $emit(eventName) 觸發事件