Vue(基础五)_vue中用ref和给dom添加事件的特殊情况

Z时代
2024-01-10
分类：综合

vue

一、前言

这篇文章涉及的主要内容有：

1、ref绑定在标签上是获取DOM对象

2、ref绑定在子组件上获取的是子组件对象

3、案列：自动获取input焦点

二、主要内容

1、基础内容：

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

（1）将ref绑定到标签上：测试之后发现在mounted()函数之后拿到的是button对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id=\'app\'></div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script>
        var App = {
            template:`
            <div class=\'app\'>
              <button ref=\'btn\'>我是按钮1</button>
            </div>`,
            created(){
                console.log(this.$refs.btn)
            },
            beforeMount:function(){
                console.log(this.$refs.btn);
            },
            mounted(){
                console.log(this.$refs.btn)//在这里才能拿到$refs.xxx
            }
        }
        new Vue({
            el:\'#app\',
            data(){
                return {
                }
            },
            template:\'<App />\',
            components:{
                App
            }
        })
    </script>
</body>
</html>

　　（2）将ref绑定到子组件上：拿到的是子组件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id=\'app\'></div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.component(\'subCom\',{
            data(){
                return{
                }
            },
            template:`<div>
            这是子组件
            </div>`
        });
        var App = {
            data(){
                return{
                }
            },
            template:`<div>
              <button ref=\'btn\'>我是按钮1</button>
              <button ref=\'btn2\'>我是按钮2</button>
              <subCom ref=\'a\'></subCom>
            </div>`,//这里拿到的是子组件对象
            created(){
                console.log(this.$refs.btn);
            },
            beforeMount(){
                console.log(this.$refs.btn);
            },
            mounted(){
                console.log(this.$refs.btn);
                console.log(this.$refs.btn2);
                console.log(this.$refs.a);
            }
        }
        new Vue({
            el:\'#app\',
            data(){
                return{}
            },
            template:\'<App/>\',
            components:{
                App
            }
        })
    </script>
</body>
</html>

2、自动获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id=\'app\'></div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var App = {
            data: function (){
                return {
                    isShow:false
                }
            },
            template:`<div class=\'app\'>
            <input type=\'text\' v-show=\'isShow\' ref = \'input\'/>
            </div>`,
            //$nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据后使用$nextTick可以获取更新之后的DOM
            mounted:function(){
                this.isShow = true;
                console.log(this.$refs.input);
                this.$nextTick(function() {
                    this.$refs.input.focus();
                })
            }
        }
        new Vue({
            el:\'#app\',
            data:function(){
                return {
                }
            },
            template:\'<App/>\',
            components:{
                App
            }
        });
    </script>
</body>
</html>