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 实例方法的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 实例方法

Vue.js 实例方法

Vue.js:实例上未定义属性或方法

vue.js基础知识篇:过渡Method和Vue实例方法

错误:vue.js:634 [Vue 警告]:属性或方法“项目”未在实例上定义,但在渲染期间被引用

Vue警告]:属性或方法“选项”未在实例上定义,但在render.Vue js问题期间引用