【vue3】ref获取dom元素，element-plus方法的使用（以走马灯next、prev方法为例）

想不到耶

已于 2022-07-28 16:45:42 修改

阅读量2.8k

点赞数 1

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2022-07-28 14:50:34 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59962820/article/details/126034289

版权

vue3 专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中使用Element Plus组件库，通过添加自定义按钮来实现轮播图图片的上下切换功能。重点讲解了在`defineComponent`模式下设置`ref`属性的方法，并提供了关键代码示例，帮助开发者理解如何正确引用carousel组件并调用其`next`和`prev`方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以element-plus走马灯 next、prev 方法为例；

功能：另外添加两个按钮，实现轮播图的上下张切换。

⚠️注意：如果 script 写成了如下这种形式（defineComponent），记得一定要将carousel return（如下代码），否则会报错。defineComponent里组件ref属性的写法：

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
	name: '',
	components: {
	},
	setup() {
        let carousel = ref(null);
        
        const changeCvImg = (e) => {
		    e == 'prev' ? carousel.value.prev() : carousel.value.next()
	    }

		return {
			carousel, // ！！！！！！！！
            changeCvImg
		}
	}
})
</script>