问题描述:
使用<script lang="ts" setup>
标签 获取ref总是找不到,起初我以为是传染子组件先后顺序问题 增加一个setTimeout 和nexttick
,但是还是找不到ref
。
查看资料看到这种写法增加了三个语法糖(父子组件通信)使用defineEmit,defineProps,defineExpose
这里我主要是想父组件 调用子组件的方法,所以使用defineEmit
还有获取ref
所以使用defineExpose
父组件
<template>
<div class="table">
<DelModal ref="delModal" @on-emit-delete="onDel" />
</div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { Button, Switch } from 'ant-design-vue';
import { BasicTable } from '/@/components/Table';
import { useData } from '../use/index';
import DelModal from '../modal/index.vue';
// const props = defineProps({});
let { registerTable } = useData();
const checked = ref<boolean>(false);
const delModal = ref();
const delHandle = (row) => {
// visible.value = true;
nextTick(() => {
delModal.value.showModal(row);
});
};
// 删除操作
const onDel = (param) => {
console.log('param:', param);
};
</script>
子组件
子组件主要使用:
defineExpose({
showModal,
});
const emit = defineEmits({
onEmitDelete: null,
});
emit('onEmitDelete', { id: oneMsg.value.id, param: form.delId });
子组件正文:
<template>
<div class="model">
<Modal
v-model:visible="visible"
title="请选择删除原因"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
:destroyOnClose="true"
@cancel="cancelHideModal"
>
<p><span style="color: red">*</span>删除原因</p>
<Select
v-model:value="form.delId"
style="width: 210px"
:options="getOptions"
placeholder="请选择删除原因"
allow-clear
@change="getChange"
/>
<p v-show="isRedP" style="color: red">删除原因不能为空</p>
</Modal>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineExpose } from 'vue';
import { Modal, Select } from 'ant-design-vue';
// const props = defineProps({});
let form = reactive({
delId: undefined,
});
const visible = ref<boolean>(false);
const isRedP = ref(false);
const getOptions = ref([
{
label: '原因1',
value: 11,
},
{
label: '原因2',
value: 22,
},
{
label: '原因3',
value: 33,
},
]);
const oneMsg = ref();
const showModal = (row) => {
visible.value = true;
console.log('row:', row);
oneMsg.value = row;
};
// 暴露方法
defineExpose({
showModal,
});
const emit = defineEmits({
onEmitDelete: null,
});
const hideModal = () => {
console.log('value1:', form.delId);
if (form.delId === undefined) {
// alert('删除原因不能为空');
isRedP.value = true;
} else {
emit('onEmitDelete', { id: oneMsg.value.id, param: form.delId });
visible.value = false;
form.delId = undefined;
}
};
const cancelHideModal = () => {
form.delId = undefined;
};
const getChange = (param) => {
console.log('param:', param);
if (param !== undefined) {
isRedP.value = false;
} else {
isRedP.value = true;
}
};
</script>
<style lang="less" scoped></style>
在父组件中调用子组件时,这里通过ref找到子组件里所有方法