vue3中 我通过传参,获取了form的值
<template>
<el-form ref="formRef" :model="form" label-width="80px" label-position="top" label-suffix=":" size="mini">
<el-form-item label="表头结构">
<div>
<!-- 标签上的右键菜单 -->
<ContextMenu ref="contextMenu" :itemList="menuItemList" @mouseleave="onMouseLeave" v-model="menuVisible"
@select="onMenuSelect" />
</div>
<div>
<el-tree :data="form.columns" node-key="id" default-expand-all :check-strictly="true"
:expand-on-click-node="false" @node-contextmenu="onContextMenu">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
{{ data.title }}
</span>
</span>
</el-tree>
<div>{{form}},1111</div>
</div>
</el-form-item>
</el-form>
</template>
<script>
import ContextMenu from "/@/components/context-menu/Index.vue";
import { useMessage } from '/@/hooks/message';
import { defineComponent, ref, watch } from 'vue';
import { onMounted } from "vue";
export default defineComponent({
components: {
ContextMenu,
},
props: {
value: {
type: Object,
default: () => ({
show: true,
border: true,
stripe: true,
resizable: true,
align: "center",
columns: [],
data: [],
showSummary: false,
})
},
},
setup(props, ctx) {
console.log(props.value.columns, "props");
const ContextMenuRef = ref()
let data = ref(props.value)
const form = ref({
columns: []
});
const formRef = ref()
const menuVisible = ref(false);
const menuItemList = ref([
{ key: "1", text: "添加同级", show: true },
{ key: "2", text: "添加子级", show: true },
{ key: "5", text: "删除节点", show: true },
{ key: "6", text: "重命名", show: true },
{ key: "8", text: "数字类", show: true },
{ key: "9", text: "文本类", show: true },
]);
watch(() => props.value, (newVal) => {
form.value = newVal;
}, { deep: true });
我在watch里吗打印没问题,但是渲染页面就是空的