在Vue中使用ref獲取dom元素節點及組件內的數據和方法

一、獲取dom元素節點

爲元素添加一個ref屬性 該屬性的值可任取 以作爲該節點的引用名
ref即爲reference(引用)的前三個字母

<div id="app">
	<input type="button" value="獲取元素" @click="getElement">
	<h3 ref="mytitle">This is title</h3>
	<p ref="mycontent">This is content</p>
</div>

用Vue實例中的自帶的$refs屬性獲取元素 用預先定義好的引用名來獲取 即在頁面中的ref屬性定義的值

<script>
    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{
        getElement()
        {
            console.log(this.$refs.mytitle.innerText);
            console.log(this.$refs.mycontent.innerText);
        }
       }
    });
</script>

---

二、獲取組件內的數據和方法

<script>
    var login={
        template:"<h1>Login</h1>",
        data()
        {
            return {
                msg:"this is msg!"
            }
        },
        methods:{
            sayHello()
            {
                console.log("Hello")
            }
        }
    }
</script>

同樣 爲組件添加一個ref屬性

<div id="app">
	<login ref="mylogin"></login>
</div>

還是用$refs屬性進行獲取：

<script>
    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{
        getElement()
        {
            // 獲取組件中的數據
            console.log(this.$refs.mylogin.msg);
            // 調用組件中的方法
            this.$refs.mylogin.sayHello();
        }
       },
       components:{
           login
       }
    });
</script>

總而言之：
無論是獲取dom節點還是組件 其基本的步驟都是一致的
先用ref指定引用名 然後在Vue實例中用$refs獲取

---