当前网站建设的主要方法,超炫酷网站欣赏,传奇做网站,wordpress对接支付接口该文章是在学习 小满vue3 课程的随堂记录示例均采用 script setup#xff0c;且包含 typescript 的基础用法 一、使用场景
递归组件 的使用场景#xff0c;如 无限级的菜单 #xff0c;接下来就用菜单的例子来学习
二、具体使用
先把菜单的基础内容写出来再说
父… 该文章是在学习 小满vue3 课程的随堂记录示例均采用 script setup且包含 typescript 的基础用法 一、使用场景
递归组件 的使用场景如 无限级的菜单 接下来就用菜单的例子来学习
二、具体使用
先把菜单的基础内容写出来再说
父组件
Tree :datamock /// 引入子组件
import Tree from ../components/17_组件/Tree.vue;// 菜单的数据格式
interface ITree {name: string;checked: boolean;children?: ITree[];
}
// 数据 mock
const mock: ITree[] [{name: 1,checked: false,children: [{name: 1-1,checked: true,},],},{name: 2,checked: false,},{name: 3,checked: false,children: [{name: 3-1,checked: false,children: [{name: 3-1-1,checked: true,},],},],},
];子组件
!-- 第一层数据 --
div v-foritem in data stylemargin-left: 16pxinput typecheckbox v-modelitem.checked /{{ item.name }}
/divscript setup langts
// 这里为了方便直接拷贝过来了实际项目中要抽离出来复用
interface ITree {name: string;checked: boolean;children?: ITree[];
}
// props 定义
defineProps{data?: ITree[];
}();
/script如图上述代码已经完成了 第一层 菜单数据的渲染 深层 的菜单数据就要用到 递归组件 了递归组件有以下 三种 使用方式
1、直接使用 自己的文件名 作为 组件名称不需要引入
当前的文件名称是 Tree.vue所以直接使用 Tree 即可
子组件
!-- 第一层数据 --
div v-foritem in data stylemargin-left: 16pxinput typecheckbox v-modelitem.checked /{{ item.name }}!-- 需要注意需要按照格式传入子组件要用的数据并且加上递归的判断条件 --Tree v-ifitem?.children?.length :dataitem.children/Tree
/div使用结果如下 2、子组件中再定义一个 script并暴露出 name
子组件
script langts
// 再起一个 scriptlang必须保持一致用来定义该组件的 name
export default {name: TreeVue,
};
/script使用时就可以用自定义的组件名
!-- 第一层数据 --
div v-foritem in data stylemargin-left: 16pxinput typecheckbox v-modelitem.checked /{{ item.name }}!-- 深层数据 --TreeVue v-ifitem?.children?.length :dataitem.children/TreeVue
/div渲染结果一致 3、使用 defineOptions 自定义组件名
Vue3.3 增加了 defineOptions 方法用来定义 optionsAPI 中的选项比如组件名称 name老一点的 vue 版本要装插件才能使用 defineOptions与上面第二种思路一致就是起个名再用
子组件
script setup langts
interface ITree {name: string;checked: boolean;children?: ITree[];
}
defineProps{data?: ITree[];
}();// 直接在原有的 script 中进行自定义
defineOptions({name: Self,
});
/script!-- 第一层数据 --
div v-foritem in data stylemargin-left: 16pxinput typecheckbox v-modelitem.checked /{{ item.name }}!-- 深层数据 --Self v-ifitem?.children?.length :dataitem.children/Self
/div渲染结果仍然一致不再赘述
