$开头的变量
只是Vue
的命名规则,为了区分普通变量属性
,避免我们自己声明或者添加自定义
属性导致覆盖
。
一、$data
vue的实例属性$data
是用于获取data
里数据的相当于用this
获取。
<template>
<div>
<p>
<a @click="click()">$dataChange</a> | <a @click="click2()">thisChange</a>
</p>
<p>{
{ data1 }}</p>
</div>
</template>
<script>
export default {
name: "CT",
data() {
return {
data1: 'data1'
};
},
mounted() {
console.log(this.$data);
},
methods: {
click() {
this.$data.data1 = '$dataChange'
},
click2() {
this.data1 = 'thisChange'
}
},
};
</script>
二、$watch
$watch
函数实际上和配置项watch
的作用是一样的,都是用来监听一个变量,区别在于:
$watch
函数更加灵活,可以随时随地添加监听$watch
函数需要手动销毁,配置项watch
会随组件的生命周期结束而自动销毁
<template>
<div>
<p>
<a @click="click()">add</a>
</p>
<p>{
{ demo.num }}</p>
</div>
</template>
<script>
export default {
name: "CT",
data() {
return {
demo: {
num: 0
},
unwatch: null
};
},
mounted() {
this.unwatch = this.$watch('demo', () => {
console.log(this.demo.num);
}, {
deep: true
})
},
destroyed() {
this.unwatch && this.unwatch();
},
methods: {
click() {
this.demo.num++;
},
},
};
</script>
第一个参数两种可能:
- 传入被观察对象表达式(字符串),比如
demo
,demo.num
- 如果表达式无法表示需要观察的内容,可以通过函数返回,比如:
() => this.demo.num
- 在需要取消的时候,执行
unwatch()
即可取消
三、$el
获取Vue
实例关联的DOM
元素,$el
指向当前组件template
模板中的根标签。
四、$set
4.1 vue中双向数据绑定存在的问题
受 ES5
的限制,Vue
不能检测到对象属性
的添加
或删除
。因为 Vue
在初始化实例
时将属性转为 getter/setter
,所以属性必须
在data
对象上
才
能让 Vue.js
转换它,才能让它是响应的
。
就像下面这样, vue并不能察觉
到data
上的demo对象
多了一个属性add
:
<template>
<div>
<p>
<a @click="click()">add</a>
</p>
<p>-{
{ demo.add }}-</p>
</div>
</template>
<script>
export default {
name: "CT",
data() {
return {
demo: {
num: 0
}
};
},
mounted() {
this.demo.add = 0;
},
methods: {
click() {
this.demo.num++;
},
},
};
</script>
4.2 $set要解决的问题
解决数据没有被双向绑定我们可以使用 vm.$set
实例方法,该方法是全局方法 Vue.set
的一个别名。
4.3 什么时候使用$set
set为解决双向绑定失效而生,我们只需要关注什么时候双向绑定失效就可以了。
只要值的地址没有改变,vue是检测不到数据变化的:
- 当你利用
索引
直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
- 当你
修改
数组的长度时,例如:vm.items.length = newLength
- 由于 JavaScript 的限制,Vue不能检测对象属性的
添加
或删除
<template>
<div>
<p>
<a @click="click()">change1</a> | <a @click="click2()">change2</a>
</p>
<p>demo.add: {
{ demo.add }}</p>
<p>array1[0]: {
{ array1[0] }}</p>
<p>array2[2]: {
{ array2[0] }}</p>
</div>
</template>
<script>
export default {
name: "CT",
data() {
return {
demo: {
num: 0
},
array1: [1],
array2: [1]
};
},
mounted() {
},
methods: {
click() {
this.array1[0] = 2;
this.array2.length = 0;
this.demo.add = 0;
},
click2() {
this.$set(this.array1, 0, 2);
this.$set(this.array2, 'length', 0);
this.$set(this.demo, 'add', 0);
},
},
};
</script>
五、$options
vue
实例属性$options
是一个对象
,可以调用vue
的各个组件下的方法
和数据
,即new vue({})
大括号内的东西,统称为options
。
- 获取、调用data外定义的属性,
this.$options.name
- 复用过滤器filters中的方法,
this.$options.filters.xxx
- 一键搞定之重置data中的数据:
this.xxxx= this.$options.data().xxxx;
this.data = this.$options.data();
<template>
<div>
<p><a @click="click()">click</a> | <a @click="reset()">reset</a></p>
<p>demo.num: {
{ demo.num }}</p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
id: {
type: String,
default: "CT",
},
},
data() {
return {
demo: {
num: 0,
},
};
},
mounted() {
console.log(this.$options.name);
},
methods: {
click() {
this.demo.num++;
},
reset() {
// 重置某一个数据
this.demo = this.$options.data().demo;
// 重置整个$data
this.data = this.$options.data();
},
},
};
</script>
六、$refs
在vue2
中,我们可以直接使用ref
获取元素,也就是直接在元素上绑定ref属性
,在直接使用this.$refs['自定义属性名']
就能直接获取。$refs 是所有注册过的ref的一个集合。
![](/qrcode.jpg)
$refs
的基本用法ref
属性 加在普通元素
上,用this.refs.(ref值)
获取到的是dom元素
ref
属性加在子组件
上,用this.refs.(ref值)
获取到的是组件实例
,可以使用组件的所有方法
。- 如果
ref
是循环
出来的,有多个重名
,那么ref
的值会是一个数组
vue
里的$refs
属性要注意的点ref
需要在dom渲染完成
后才会有,在使用的时候确保dom已经渲染完成
。比如在生命周期mounted(){}
钩子中调用,或者在this.$nextTick(()=>{})
中调用。$ref
本身作为渲染结果
被创建,在初始渲染
的时候不能访问他们,是不存在的$refs
不是响应式的,只在组件渲染完成后
才填充
七、$event
$event有下面两个作用:
- 获取原生DOM事件的事件对象
- 事件注册所传的参数(子组件向父组件传值)
<template>
<div>
<p><a @click="click()">click</a></p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
id: {
type: String,
default: "CT",
},
},
data() {
return {
};
},
mounted() {
console.log(this.$options.name);
},
methods: {
click() {
this.$emit('getData', 'from CT data');
},
},
};
</script>
<template>
<div>
<p @click="click($event)">BT</p>
<CT @getData="getData($event)"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
methods: {
click(event) {
console.log(event);
},
getData(event) {
console.log(event);
}
},
};
</script>
八、$emit
$emit
实际上是发送了一个广播事件,$emit
调用时可以传递两个参数$emit('eventname', data)
:
- eventname:事件名称
- data:跟随事件一起传递的数据
对于如何接受$emit
的广播事件有两种方案:
- 使用
$on
方法接收广播事件:vm.$on( 'eventname', fn )
- 使用自定义事件:
<CT @eventname="fn($event)"></CT>
。实际上自定义事件就是vue自动帮我们调用了一下vm.$on( 'eventname', fn )
函数
九、$router
全局的 router 实例
。通过 vue 根实例
中注入 router 实例
,然后再注入到每个子组件
,从而让整个应用都有路由功能。其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其push(), replace(), go()
等方法。
十、$route
当前激活
的路由的信息对象。每个对象都是局部的
,可以获取当前路由的 path, name, params, query
等属性。
十一、$store
代表的是new Vuex({})
十二、$nextTick
在下次DOM更新循环结束后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的DOM。
十三、$root
$root
访问根组件中的属性或方法
this.$root.genMethod();//genMethod()是根组件中的方法名
this.$root.genName;//genName是根组件data中的属性名
十四、$parent
可以直接操作当前组件的父组件。
参考
- 浅谈vue中的 含义及其用法( 含义及其用法( 含义及其用法(xxx引用的位置)
- vue中的$
- vue 之 $符号
- vue中常见的$的用法
- vue中的$符号
- vue中$set用法详细讲解
- vue之$options
- Vue-$refs的基本用法
- vue中$refs的三种用法
- vue中this. p a r e n t 、 t h i s . parent、this. parent、this.root、this. c h i l d r e n 、 t h i s . children、this. children、this.ref的区别和作用
- vue中 r o o t 访问根组件、 root访问根组件、 root访问根组件、parent和 e m i t 访问父组件、 emit访问父组件、 emit访问父组件、ref访问子组件