Vue_(组件通讯)动态组件
2023-09-14 08:57:05 时间
动态组件 传送门
在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件
动态组件的使用:需要使用内置组件<component></component>,根据 :is 的值决定显示哪个组件,:is的值是要显示的组件id
目录结构
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary</title> </head> <body> <div id="GaryId"> <button @click="selectedName = 'my-component-a'"> a </button> <button @click="selectedName = 'my-component-b'"> b </button> <button @click="selectedName = 'my-component-c'"> c </button> <component :is="selectedName"></component> </div> </body> <script type="text/javascript" src="../js/vue.js" ></script> <script type="text/javascript"> new Vue({ data:{ selectedName:'my-component-a' }, components:{ "my-component-a":{ template:"<h1>Hello Vue</h1>" }, "my-component-b":{ template:"<a href='https://www.cnblogs.com/1138720556Gary/'>Gary博客</a>" }, "my-component-c":{ template:"<p>欢迎来到Gary博客</p>" } } }).$mount("#GaryId"); </script> </html>
实现过程
Vue的data域中为组件申请一个名称
data:{ selectedName:'my-component-a' },
<div>标签中标明使用'my-component-a'组件模板
<div id="GaryId"> <button @click="selectedName = 'my-component-a'"> a </button> <button @click="selectedName = 'my-component-b'"> b </button> <button @click="selectedName = 'my-component-c'"> c </button> <component :is="selectedName"></component> </div>
在Vue的components中标明组件模块
new Vue({ data:{ selectedName:'my-component-a' }, components:{ "my-component-a":{ template:"<h1>Hello Vue</h1>" }, "my-component-b":{ template:"<a href='https://www.cnblogs.com/1138720556Gary/'>Gary博客</a>" }, "my-component-c":{ template:"<p>欢迎来到Gary博客</p>" } } }).$mount("#GaryId");
相关文章
- Vue - 定义使用组件
- vue-router 的原理
- [Typescript] 88. Hard - Simple Vue
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- 打造 Vue.js 可复用组件
- vue+elementui项目打包后样式变化问题
- 浅谈 vue实例 和 vue组件
- [Vue + TS] Watch for Changes in Vue Using the @Watch Decorator with TypeScript
- vue.js3: 用axios访问接口(vue@3.2.37 / axios@0.27.2)
- vue3:子组件向父组件发送数据(vue@3.2.26)
- SAP Cloud Application Programming bookshop 例子 Vue页面不能正常显示的原因分析
- Vue 记录 TypeError: Cannot read properties of undefined (reading ‘_withTask‘)
- vue 3.0 suspense组件
- Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
- Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
- vue+spirngboot 分离技术实现图书信息的增删改查(改造这学期的课程设计【1】)
- 手把手教你如何构建Vue前端组件库
- 测试开发之Vue学习笔记-Vue基础
- Vue学习笔记——Vue UI组件库