Vue ref 获取DOM元素
1.获取组件中的DOM元素
<div id="app">
<!-- Vue获取DOM元素 -->
<button @click="show">点击获取元素的属性</button>
<h3 ref="myh3">Vue获取元素的属性</h3>
</div>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
show:function(){
// 通过 this.$refs对象获取属性值为 "myh3"的DOM元素
// this.$refs.myh3 获取到h3 元素
console.log(this.$refs.myh3.innerHTML)
}
}
})
</script>
2.获取子组件
<div id="app"> <!-- Vue获取DOM元素 --> <button @click="show">点击获取元素的属性</button> <h3 ref="myh3">Vue获取元素的属性</h3> <hr> <login ref="mySon"></login> </div> <template id="temp"> <h3>这是子组件</h3> </template> <script> var login = { template:"#temp", data:function(){ return { msg:"这是子组件中的数据" } }, methods:{ showSon:function(){ console.log("这是儿子的方法") } } } new Vue({ el:"#app", data:{ }, methods:{ show:function(){ //this.$refs.mySon 获取到子组件 斌给可以获取到子组件中的数据 console.log(this.$refs.mySon.msg); //这是子组件中的数据 // 通过获取到的子组件可以 调用子组件中的方法 this.$refs.mySon.showSon(); //这是儿子的方法 } }, components:{ login, } })
总结:
原生获取DOM方法,document.querySelector 来获取,现在Vue避免直接操作DOM元素,于是提供了refs对象来操作DOM.
根据 ref 可以获取到DOM元素和组件,可以获取到组件就可以直接操作组件的方法和数据。