Vue.js 实例方法

最新推荐文章于 2024-05-24 00:05:23 发布

shi_zi_183

最新推荐文章于 2024-05-24 00:05:23 发布

阅读量744

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/shi_zi_183/article/details/122486856

版权

vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

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>

在这里插入图片描述

shi_zi_183

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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属性
复制链接

扫一扫