文章目录
- Vue获取组件元素
- ref获取组件元素
Vue获取组件元素
如果想使用哪个DOM元素，就给它加上ref属性，然后用$refs属性获取它的元素对象，示例如下：
全部代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue获取DOM元素的方法</title></head><body><div id="app"><!-- 为h1添加ref属性，属性自定义 --><h1 ref="h1text">yoyo!这里是h1</h1><input type="button" name="单击" @click="btn" value="单击" /></div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script>var vm=new Vue({el:'#app',data:{},methods:{btn(){// 使用this.$refs.自定义属性，即可获取到我们刚刚定义到的标签console.log(this.$refs.h1text)}}})</script></body>
</html>
运行：
ref获取组件元素
可在上一步代码基础之上进行修改
一共是三步
第一步：创建组件，声明数据和方法
第二步：为组件添加ref属性
第三步：通过$refs属性获取组件
全部代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue获取DOM元素的方法</title></head><body><div id="app"><!-- 为h1添加ref属性，属性自定义 --><h1 ref="h1text">yoyo!这里是h1</h1><input type="button" name="单击" @click="btn" value="单击" /><login ref="mylogin"></login></div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script>// 创建组件loginvar login={template:'<div><h1>登录</h1></div>',data(){return {// 声明数据msg:'子组件内容'}},methods:{// 声明子组件的方法show(){console.log("子组件的方法")}}}var vm=new Vue({el:'#app',data:{},methods:{btn(){// 使用this.$refs.自定义属性，即可获取到我们刚刚定义到的标签console.log(this.$refs.h1text.innerText)console.log(this.$refs.mylogin.msg)this.$refs.mylogin.show()}},components:{login}})</script></body>
</html>运行
