网站首页 > 技术文章正文

13、ref获取DOM元素（获取dom方法）

nanyue 2024-10-29 14:49:13 技术文章 9 ℃

获取DOM元素对象

都说Vue无需操作DOM对象，那么当我们在需要拿到页面的一个DOM对象的时候，我们该如何操作呢，这个时候Vue本身已经给我们想到了解决方案，那么就是通过Vue的ref对象来获取指定的ref【reference】值的DOM元素，示例如下：

<body>

<button @click="showEle">打印app标签</button>

</div>

</body>

var vm1 = new Vue({

el: ".app",

methods: {

showEle() {

console.log(this.$refs.cce.innerHTML)

}

});

</script>

获取template元素对象

<body>

<button @click="showEle">打印app标签</button>

</div>

</body>

</template>

var vm1 = new Vue({

el: ".app",

components: {

'cce': {

template: "#temp",

}

methods: {

showEle() {

console.log(this.$refs.cce.$el)

}

});

</script>

获取template元素对象的数据和方法属性

<body>

<button @click="showEle">打印app标签</button>

</div>

</body>

</template>

var vm1 = new Vue({

el: ".app",

components: {

'cce': {

template: "#temp",

data: () => {

return {

msg: 'cce'

}

methods:{

show(){

console.log('子组件的show方法')

}

methods: {

showEle() {

console.log(this.$refs.cce.msg)

this.$refs.cce.show()

}

});

</script>

上一篇： vue 3.0 使用ref获取dom元素（vue ref获取元素高度）
下一篇： vue 获取组件dom对象（组件中获取vuex值）

网站首页 > 技术文章 正文

13、ref获取DOM元素（获取dom方法）

猜你喜欢

网站首页 > 技术文章正文