郴州市网站建设科技,沈阳建设工程信息网站,广州市筑正工程建设有限公司网站,互联网十大创业项目情景#xff1a;element-ui 二次封装了 el-table 组件#xff0c;使用封装组件时#xff0c;想要调用 el-table 组件内置的一些方法。只在封装组件上定义 ref 是拿不到 el-table 内置方法的。解决方法如下。
1. vue2
封装组件
templateel-table refinn…情景element-ui 二次封装了 el-table 组件使用封装组件时想要调用 el-table 组件内置的一些方法。只在封装组件上定义 ref 是拿不到 el-table 内置方法的。解决方法如下。
1. vue2
封装组件
templateel-table refinnerComponentRef v-bind$attrs/el-table/templatescriptexport default {data() {return {};},mounted() {const entries Object.entries(this.$refs.innerComponentRef);for (const [key, value] of entries) {this[key] value;}},};/script
使用组件
templatemyTable refmyTabletRef //templatescriptimport myTable from ./myTable.vue;export default {components: { myTable },data() {return {val: 0,};},mounted() {console.log(this.$refs.myTabletRef);// 这里就可以获取到 el-table 组件提供的所有方法},};/script
2. vue3
封装组件
templateel-table refinnerComponentRef v-bind$attrs/el-table/templatescript setupimport { ref } from vue;const innerComponentRef ref();/script
使用组件
templatemytable refmytableRef //templatescript setupimport { onMounted, ref } from vue;import mytable from com/mytable/index.vue;const mytableRef ref();onMounted(() {for (const key in mytableRef.value.innerComponentRef) {this[key] mytableRef.value.innerComponentRef[key];}});/script
