Vue.js 中如何将 YfStocksList.vue 的 changeType 输出到其他文件

在 YfStocksList.vue 中，可以将 changeType 作为一个 prop 传递给其他文件。首先，在 YfStocksList.vue 中定义一个 prop：

<script lang="ts" setup>
  import { ref, defineProps } from 'vue';

  const changeType = ref<string>('1');

  const changeOptions = [
    { label: '无', value: '1' },
    { label: '盘点', value: '2' },
    { label: '调价', value: '3' },
    { label: '规格', value: '4' },
  ];

  const props = defineProps({
    changeType: {
      type: String,
      default: changeType.value,
    },
  });
</script>

然后，在其他文件中引入 YfStocksList 组件，并将 changeType 作为 prop 传递给组件：

<template>
  <YfStocksList :changeType="changeType" />
</template>

<script>
import YfStocksList from '@/components/YfStocksList.vue';

export default {
  data() {
    return {
      changeType: '2', // 设置默认值
    };
  },
  components: {
    YfStocksList,
  },
};
</script>

最后，在 YfStocksList.vue 中可以使用 props.changeType 来获取 changeType 的值：

<script lang="ts" setup>
  import { ref, defineProps } from 'vue';

  const changeType = ref<string>(props.changeType);

  const changeOptions = [
    { label: '无', value: '1' },
    { label: '盘点', value: '2' },
    { label: '调价', value: '3' },
    { label: '规格', value: '4' },
  ];

  const props = defineProps({
    changeType: {
      type: String,
      default: changeType.value,
    },
  });
</script>

现在，在 YfStocksList.vue 中的 ifShow 属性中就可以使用 changeType.value 来判断是否显示：

{
  title: '盘点库存',
  dataIndex: 'quantity',
  ifShow: changeType.value === '2',
},

这样就可以在其他文件中控制 YfStocksList.vue 中的 changeType 值，并根据 changeType 的值来决定是否显示某些内容。