Vue之ref详解与实例

时间 2019-12-22

标签 vue ref 详解实例繁體版

原文原文链接

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

1、加在普通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聚焦。vue

2、ref加在父级上app

<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>

3、ref加在子组件上this

<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>

4、父组件与子组件都有ref的状况spa

<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。code

ref加在父组件上若是获取元素的高度：父组件代码-this.$refs.inputParent.$el.clientHeightcomponent

若是父组件ref=inputParent，子组件ref=input，在父组件获取子组件input的值 this.$refs.inputParent.input 注意ref不是响应式的，通常须要点击按钮获取input值htm

子组件中没法经过this.$refs.inputParent 获取父组件的信息对象

公众号：前端之攻略