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

一、前言

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

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>

三、总结

1、ref不能重名，重名后面会覆盖掉前面的

2、ref绑定到标签上，$refs.xxx获取到的是Dom对象

3、ref绑定到子组件上，获取到的是子组件实例对象

4、$nextTick([callback])是下一次dom对象更新后执行里面的回调函数

虽然现在走得很慢，但不会一直这么慢

相关阅读:
Lua 语言环境安装
python __init__.py 的作用
python functiontools模块中的 wraps
函数装饰器、类装饰器
redis pipline 和事务
Innodb中的行锁与表锁
mongoengine 分页切片与 skip + limit 的区别
python 可变类型传的内存地址，不可变类型在传递的时候传的是值
PHP常用人工智能库
PHP批量给目录下所有的文件转换编码

原文地址：https://www.cnblogs.com/xxm980617/p/10625458.html