VUE3组件使用:ref的问题

cqwcns

vue3（setup），现在有一个组件是这样的：

[HTML] 纯文本查看 复制代码

<template>
    <div :class="[focusChart === name ? 'fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-30' : '', bodyClass]">
        <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>

我这样调用：

[HTML] 纯文本查看 复制代码

<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[chart] = ref(null);
});
const getDomRef = (name) => (el) => (domChart[name] = el);

onMounted(async () => {

});
</script>

但使用插槽会增加组件调用的复杂性，是否可以不使用插槽实现这个组件原有的功能？

TommyInterfer

看起来组件需求似乎是要在一个图表双击时聚集，点击返回退出聚集模式。然后这个聚集似乎也只是控制class使之样式改变。
没看明白chartsOptions是做什么的，是有一个图表集合吗还是什么。可以用v-for，把集合从外面传进去吧，然后用一个变量在组件内部标识isActive状态，在组件内部控制关闭聚集模式和开启，不用在父组件里控制了。

唯一之境

使用了一个插槽并不会增加多少复杂性，可以看看UI库，插槽用法用得多；
其次你到底要实现什么功能，没有清楚；
再者，如果你插槽结构一定，可以把结构放到组件里面，用props的方式进行通信；

yushuai033X

[JavaScript] 纯文本查看 复制代码

<template>
  <div :class="[focusChart === name ? 'fixed top-0 left-0 right-0 bottom-0 w-screen h-screen z-30' : '', bodyClass]">
    <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[chart] = ref(null);
});
const getDomRef = (name) => (el) => (domChart[name] = el);

onMounted(async () => {

});
</script>