Vue 组件间传递数据:使用 provide/inject 实现 YfStocksList 和 YfStocks 数据交互
将 changeType 输出到 YfStocks.data.ts 中,可以通过在 YfStocksList.vue 中使用 provide/inject 进行传递。
首先,在 YfStocksList.vue 中,将 changeType 设置为 provide:
<script lang="ts" setup>
import { ref, provide } from 'vue';
const changeType = ref<string>('1');
const changeOptions = [
{ label: '无', value: '1' },
{ label: '盘点', value: '2' },
{ label: '调价', value: '3' },
{ label: '规格', value: '4' },
];
provide('changeType', changeType);
</script>
然后,在 YfStocks.data.ts 中,使用 inject 来获取 changeType 的值:
<script lang="ts">
import { inject } from 'vue';
export const YfStocks = {
data() {
const changeType = inject<string>('changeType');
return {
title: '盘点库存',
dataIndex: 'quantity',
ifShow: changeType.value === '2',
};
},
};
</script>
现在,YfStocks.data.ts 中的 ifShow 属性将根据 changeType 的值来决定是否显示。
原文地址: https://www.cveoy.top/t/topic/qtbN 著作权归作者所有。请勿转载和采集!