vm.$refs及$el

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vm.$refs及$el相关的知识，希望对你有一定的参考价值。

参考技术A ref 主要有两种用法：
1、ref 加在普通的元素上，获取页面中所有含有ref属性的DOM元素。
使用的时候用this.$refs.（ref值） 获取到的是dom元素

2、ref 加在子组件上，用this. refs.（ref值）.方法（） 就可以使用了。

每个组件都有$el属性，用于获取该组件内的html元素，在mounted生命周期中才有效。

vm. el获取Vue实例关联的DOM元素)，在mounted生命周期中才有效。

比方说上述想获取自定义组件tabControl，并获取它的OffsetTop。
则需要先获取该组件 , 再取OffsetTop。

在组件内设置 属性 ref='一个名称(tabControl2)', 然后通过 this. el来获取组件中的DOM元素

打印ref="chatContent"的dom元素

this. refs.bot.$el拿到组件内的html元素
van-field被当做组件对待,一直以为它得到是dom元素

el 是Vue实例的挂载目标。在实例挂载之后，元素可以用 vm.$el 访问。
挂载阶段还没开始的时候， $el 属性是不可见的。Vue生命周期mounted阶段， el 被新创建的 vm.$el 替换,这个时候Vue实例的挂载目标确定， DOM渲染完毕。在这个Vue实例当中，也就可以使用 vm.$el 访问到 el 了。具体参考 Vue文档API

el 的作用，用于指明 Vue 实例的挂载目标。
重点关注：如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版

参考 https://blog.csdn.net/zhangfeng1742/article/details/82977447

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>

以上是关于vm.$refs及$el的主要内容，如果未能解决你的问题，请参考以下文章

Vue 通过ref获取DOM元素

Vue 通过ref获取DOM元素

vue.js基础学习

Vue.js 实例方法

Vue.js 实例方法

Vue.js 实例方法