Vue 组件二次封装透传slots、refs、attrs、listeners

原创

已于 2025-08-15 18:05:02 修改 · 430 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-08-15 17:26:51 首次发布

最近写了一个开源项目，有些地方需要二次封装，需要透传一些数据，需要注意的是`ref`，我这里使用俩种方式间接传递`ref`，具体如下：

使用：

import VideoPlayer from './index.js'

Vue.use(VideoPlayer)

index.js：因为是Vue 2.7 老项目，所以这里用Vue.extend构造函数构造组件这里和 Vue3 不太一样，Vue3 要用 defineComponent创建组件支持hook式和选项式，废弃了Vue.extend()，这里属性继承用$attrs, 事件用 $listeners(Vue3 不需要，在attrs里面)，插槽这里固定指定了一个ocr作用域插槽，refs后面说

import Player from "video-player"
import OcrResult from "@/components/ocrResult"
import Vue from "vue"

let P = Vue.extend({
   
   
	data() {
   
    
		return {
   
    
			isEnableOcr: true, // 是否启用ocr
			isEnableWaterMarker: true, // 是否启动水印
			waterMarkerContent: '水印' // 水印内容
	 	} 
	}，