VUE3组件使用:ref的问题
vue3（setup），现在有一个组件是这样的：<template>
<div :class="">
<div v-if="focusChart === name" class="flex">
<el-button link :icon="Back" @click="$emit('closeFocus')">返回</el-button>
<span class="flex-1 font-bold h-10 flex justify-center items-center">聚集模式</span>
</div>
<slot />
</div>
</template>
<script setup>
import { Back } from '@element-plus/icons-vue';
defineProps(['name', 'title', 'bodyClass', 'focusChart'])
</script>
我这样调用：
<template>
<myChart bodyClass="w-1/2 h-full flex flex-col px-6 bg-white" name="ZT_TouSuZaiTu" :focusChart="focusChart" title="聚集模式"
@close-focus="focusChart = ''">
<div @dblclick="focusChart = 'ZT_TouSuZaiTu'" :ref="getDomRef('ZT_TouSuZaiTu')" class="flex-1 w-full h-full" />
</myChart>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import myChart from '@/common/components/myChart.vue';
const chartsOptions = {
ZT_ZhiYuan: ''
};
const focusChart = ref(''),
domChart = reactive({}),
charts = {};
Object.keys(chartsOptions).forEach(chart => {
domChart = ref(null);
});
const getDomRef = (name) => (el) => (domChart = el);
onMounted(async () => {
});
</script>
但使用插槽会增加组件调用的复杂性，是否可以不使用插槽实现这个组件原有的功能？ 看起来组件需求似乎是要在一个图表双击时聚集，点击返回退出聚集模式。然后这个聚集似乎也只是控制class使之样式改变。
没看明白chartsOptions是做什么的，是有一个图表集合吗还是什么。可以用v-for，把集合从外面传进去吧，然后用一个变量在组件内部标识isActive状态，在组件内部控制关闭聚集模式和开启，不用在父组件里控制了。 使用了一个插槽并不会增加多少复杂性，可以看看UI库，插槽用法用得多；
其次你到底要实现什么功能，没有清楚；
再者，如果你插槽结构一定，可以把结构放到组件里面，用props的方式进行通信； <template>
<div :class="">
<div v-if="focusChart === name" class="flex">
<el-button link :icon="Back" @click="$emit('closeFocus')">返回</el-button>
<span class="flex-1 font-bold h-10 flex justify-center items-center">聚集模式</span>
</div>
<myChart
bodyClass="w-1/2 h-full flex flex-col px-6 bg-white"
name="ZT_TouSuZaiTu"
:focusChart="focusChart"
title="聚集模式"
@close-focus="focusChart = ''"
>
<div @dblclick="focusChart = 'ZT_TouSuZaiTu'" :ref="getDomRef('ZT_TouSuZaiTu')" class="flex-1 w-full h-full" />
</myChart>
</div>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { Back } from '@element-plus/icons-vue';
import myChart from '@/common/components/myChart.vue';
const chartsOptions = {
ZT_ZhiYuan: ''
};
const focusChart = ref(''),
domChart = reactive({}),
charts = {};
Object.keys(chartsOptions).forEach(chart => {
domChart = ref(null);
});
const getDomRef = (name) => (el) => (domChart = el);
onMounted(async () => {
});
</script>
页:
[1]