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 獲取父組件的信息對象

公衆號：前端之攻略