vue2总结一些小功能

一 、keep-alive

实现router切换状态保留 如果加载的数据ok 就不用重复加载了。代码示例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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" 向子组件传递数据--> <router-view :seller= "seller"></router-view> </keep-alive> </div> </div> </template>

二 、ref 引用指向 DOM节点

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

1 2 3 4 5

<div id= "parent"> <user-profile ref= "profile"></user-profile> </div> // 访组件实例 this. $refs.profile

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，应当避免在模板或计算属性中使用 $refs。

三、Vue.nextTick( [callback, context] )

异步更新队列、为了在数据变化之后等待 Vue 完成更新 DOM可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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) 方法向嵌套对象添加响应式属性

1 2 3 4 5 6 7 8 9 10

var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) //你可以添加一个新的 age 属性到嵌套的 userProfile 对象或者更改： Vue.set(vm.userProfile, 'age', 27); Vue.set(vm.userProfile, 'name', 'tom');

有时你可能需要为已有对象赋予多个新属性，在这种情况下，应该用两个对象的属性创建一个新的对象

1 2 3 4

this.userProfile = Object.assign({}, this.userProfile, { age: 27, favoriteColor: 'Vue Green' })

五 、Vue.filter( id, [definition] )自定义过滤器

注册或获取全局过滤器。

1 2 3 4 5 6 7 8 9

// 注册 Vue.filter( 'my-filter', function (value) { // 返回处理后的值 return ； }) // getter，返回已注册的过滤器 var myFilter = Vue.filter( 'my-filter') })

六 、Vue.directive( id, [definition] )自定义属性指令

详细用法 https://cn.vuejs.org/v2/guide/custom-directive.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 注册 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 )

1 2 3 4 5 6 7 8 9 10

import StarComponent from './star.vue' const Star_ing = { install: function(Vue) { Vue.component( 'Star_', StarComponent) } } export default Star_ing Vue.use(Star)//使用插件 //调用插件 <Star_></Star_>

八 、使用 Prop 传递数据

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。详细地址：https://cn.vuejs.org/v2/guide/components.html#Prop

1 2 3 4 5 6 7 8 9 10

//父组件 <router-view :seller= "seller"></router-view> //子组件 export default { props: { seller: { type: Object } } }

九 、$emit 触发事件

• $emit是触发当前实例上的事件。附加参数都会传给监听器回调。
• 详细地址https://cn.vuejs.org/v2/guide/components.html#使用-v-on-绑定自定义事件
• 非父子组件的通信 https://cn.vuejs.org/v2/guide/components.html#非父子组件的通信

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  //子组件 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) 触发事件