Vue之ref详解与实例

最新推荐文章于 2024-05-23 13:35:39 发布

weixin_34336292

最新推荐文章于 2024-05-23 13:35:39 发布

阅读量501

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/1861565

版权

2019独角兽企业重金招聘Python工程师标准>>>

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用。ref可以用在普通的Dom元素上，也可以用在父级组件上，还可以用在子组件上，通过this.$refs对象访问，

一、加在普通DOM元素上，引用指向的就是DOM元素：

<body class="">
    <div id="example1">
       <input type="text" ref="input" id="inputId"/>
	   <button @click="add">添加</button>
    </div>
    <script src="../js/vue.js"></script>
    <script >
       
      var example1=new Vue({
        el:"#example1",
        methods:{
           add:function(){
		     this.$refs.input.value = "22";
			 console.log(this.$refs.input);   //显示<input type="text" id="inputId"/>
			 console.log(document.getElementById("inputId"))//显示<input type="text" id="inputId"/>
		   }
        }
      })
   
    </script>
</body>

下面的例子实现的功能是页面打开input聚焦。

二、ref加在父级上

<body class="">
    <div id="example">
        <base-input ref="usernameInput"></base-input>
    </div>
    <script src="js/vue-2.5.13.js"></script>
    <script>
    Vue.component('base-input', {
        data: function() {
            return {
                initValue: "hi"
            }
        },
       
        template: '<input type="text"  v-bind:value="initValue">'
    })
    var app7 = new Vue({
        el: "#example",

        mounted: function() {
            console.log(this.$refs.usernameInput.$el)
            this.$refs.usernameInput.$el.focus()
            //this.$refs.usernameInput  指向子组件的实例
        }

    })
    </script>
</body>

三、ref加在子组件上

<body class="">
    <div id="example">
        <base-input ref="usernameInput"></base-input>
    </div>
    <script src="js/vue-2.5.13.js"></script>
    <script>
    Vue.component('base-input', {
        data: function() {
            return {
                initValue: "hi"
            }
        },
        mounted: function() {
            this.$refs.input.focus()
        },
        template: '<input type="text" ref="input" v-bind:value="initValue">'
       
    })
    var app7 = new Vue({
        el: "#example",
    })
    </script>
</body>

四、父组件与子组件都有ref的情况

<body class="">
    <div id="example">
        <base-input ref="usernameInput" v-on:click.native="focus1"></base-input>
    </div>
    <script src="js/vue-2.5.13.js"></script>
    <script>
    Vue.component('base-input', {
        data: function() {
            return {
                initValue: "hi"
            }
        },
        methods: {
            //用来从父级组件定义方法
            focus: function() {
                alert("innerhi")
                this.$refs.input.focus(); //并不执行聚焦，父组件的mounted执行聚焦

            }
        },
        template: '<input type="text"  ref="input" v-bind:value="initValue">'

    })
    var app7 = new Vue({
        el: "#example",
        methods: {
            focus1: function() {
                alert("hi")
                var val = this.$refs.usernameInput.focus();
                //alert(val);
                alert("you clicked me");
            }
        },
        mounted: function() {
            console.log(this.$refs.usernameInput)
            this.$refs.usernameInput.focus()
        }

    })
    //只有在子组件中的方法中定义focus事件并有this.$refs.input.focus();代码，父组件才通过this.$refs.usernameInput.focus()代码聚焦
    </script>
</body>

总结：ref主要用在特殊的情况下获取元素。如果ref只加到父组件上，this.$refs.usernameInput.$el.focus() 一定要加$el。

公众号：前端之攻略

转载于:https://my.oschina.net/u/2612473/blog/1861565