Vue 操作原生Dom refs

Posted 2021-03-19 hybb

tags:

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

获取原生DOM

给标签或组件添加ref属性

<div ref='alex'></div>
<p ref='a'></p>
<Home ref='b'></Home>

this.$refs.alex  // 获取原生的Dom对象
this.$refs.b   // 获取的是组件的实例化对象

refs属性集合

console.log(this.$refs.input);  // 获取原生DOM
// 返回值  <input type="text">



this.$refs.input.focus(); // 操作原生dom
// 原生dom进行获取焦点操作  focus  js方法获取焦点


console.log(this.$refs.abc);  // 获取abc组件实例对象
// VueComponent?{_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent,?…}


// 获取abc子组件的父组件，这里就是当前组件
console.log(this.$refs.abc.$parent);  // 获取父组件 


// 获取abc组件的根组件，也就是原始Vue
console.log(this.$refs.abc.$root); // 获取最原始的Vue 根


// 获取当前组件的子组件，是个列表集合
console.log(this.$children);  // 获取儿子组件

一个测试例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>

<script src="../vue.js"></script>
<script>
    Vue.component('Test', {
        data: function () {
            return {}
        },
        template: `
            <div>我是测试组件</div>
        `
    });

    Vue.component('Test2', {
        data: function () {
            return {}
        },
        template: `
            <div>我是测试组件2</div>
        `
    });

    let App = {
        data: function () {
            return {}
        },
        template: `
            <div>
                <input type="text" ref="input">
                <Test ref="abc"/>
                <Test2 ref="efg"/>
            </div>
        `,
        mounted: function () {
            console.log(this.$refs.input);  // 获取原生DOM
            // 原生dom进行获取焦点操作  focus  js方法获取焦点
            this.$refs.input.focus();
            console.log(this.$refs.abc);  // 获取abc组件实例对象
            console.log(this.$refs.abc.$parent);  // 获取父组件
            console.log(this.$refs.abc.$root); // 获取最原始的Vue 根
            console.log(this.$children)  // 获取儿子组件

            // for (let key in this.$refs){
            //     console.log(this.$refs[key]);
            // }
        }
    };

    let vm = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        template: `
        <App />
        `,
        components: {
            App
        }
    });
</script>
</body>
</html>

以上是关于Vue 操作原生Dom refs的主要内容，如果未能解决你的问题，请参考以下文章