在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获取

---