如何使用 component 和 tab 选项卡组件，实现显示多个同一组件的实例？
在需要动态显示多个相同组件的情况下，可以使用 标签配合 Tab 选项卡组件来实现。 标签允许动态加载组件，而 Tab 选项卡可以提供一个方便的切换界面。
演示代码
{{item.label}}import Test1 from '@/testComponent/test1.vue';import Test3 from '@/testComponent/test3.vue';export default { data() { return { radio1: "a1", message: undefined, page_list: [ { seq: 1, view_code: "a1", label: "测试1", type: 1 }, { seq: 3, view_code: "b0", label: "特定测试组件A", type: 2, message: "参数777", is_regist: false }, { seq: 4, view_code: "bc", label: "特定测试组件B", type: 2, message: "参数666", is_regist: false }, ], }; }, components: { a1: Test1, }, methods: { radio_onchange(value) { const item = this.page_list.find(item => item.view_code === value); if (item.type !== 2) { return; } if (item.is_regist === false) { Vue.component(item.view_code, Test3); this.message = item.message; item.is_regist = true; } }, },};
关键点说明：
在 元素外套一层 ，并添加 key 键（例如 :key=”radio1″）。 可以保留组件的状态，并阻止组件在切换时被销毁。为 设置 :is 属性，其值为需要加载的组件名（例如 :is=”radio1″）。为 传递参数和数据，例如 :message=”message”。
通过这种方式，每次切换 Tab 时，都会加载一个新的组件实例，并且每个组件实例都有自己独立的状态。
以上就是如何使用 “ 和 Tab 选项卡组件，实现显示多个同一组件的实例，并保留每个实例的状态？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557653.html
微信扫一扫 
支付宝扫一扫 
