我是
靠谱客的博主
温暖铃铛，最近开发中收集的这篇文章主要介绍
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) 触发事件
最后
以上就是温暖铃铛为你收集整理的vue2总结一些小功能的全部内容，希望文章能够帮你解决vue2总结一些小功能所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复