Vue.js 实例方法
Posted shi_zi_183
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 实例方法相关的知识，希望对你有一定的参考价值。
Vue.js 实例方法
实例属性
组件树访问
1、vm.$parent
用来访问当前组件实例的父实例
2、vm.$root
用来访问当前组件树的根实例，如果当前组件没有父实例，$root表示当前组件实例本身
3、vm.$children
用来访问当前组件实例的直接子组件实例
4、vm.$refs
用来访问使用了v-ref指令的子组件。
DOM访问
1、vm.$el
用来访问挂载当前组件实例的DOM元素
数据访问
1、vm.$data
用来访问组件实例观察的数据对象，该对象引用组件实例化时选项中的data属性。
2、vm.$options
用来访问组件实例化时的初始化选项对象。
实例方法
实例DOM方法的使用
vm.$mount([elementOrSelector])
参数：
- Element | string [elementOrSelector]
- boolean [hydrating]
返回值：vm 实例自身
用法：
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用vm.$mount()手动地挂载一个未挂载的实例。
如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身，因而可以链式调用其它实例方法。
vm.$forceUpdate()
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
vm.$nextTick( [callback] )
参数：Function [callback]
用法：
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
vm.$destroy()
用法：
完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
实例Event方法的使用
vm.$on( event, callback )
参数：
- string | Array event (数组只在 2.2.0+ 中支持)
- Function callback
用法：
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="example"></div>
</body>
<script>
var vm = new Vue(
el: '#example'
)
vm.$on('test',function (msg)
console.log(msg)
)
vm.$emit('test','hi')
</script>
</html>
vm.$once( event, callback )
参数：
- string event
- Function callback
用法：
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
vm.$off( [event, callback] )
参数： - string | Array event (只在 2.2.2+ 支持数组)
- Function [callback]
用法： - 移除自定义事件监听器。
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除该事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器。
vm.$emit( eventName, […args] )
参数： - string eventName
- […args]
触发当前实例上的事件。附加参数都会传给监听器回调。
示例：
只配合一个事件名使用 $emit：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="emit-example-simple">
<welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
</body>
<script>
Vue.component('welcome-button',
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>
`
)
new Vue(
el: '#emit-example-simple',
methods:
sayHi: function ()
alert('Hi!')
)
</script>
</html>
以上是关于Vue.js 实例方法的主要内容，如果未能解决你的问题，请参考以下文章