Vue中的动态组件(v-bind:is)的使用及组件传值

本文详细介绍了Vue中如何使用动态组件(v-bind:is)实现多标签界面的组件切换,并利用keep-alive组件缓存机制提升性能。同时,阐述了父组件向子组件传递数据的方法,包括自定义组件名和通过props属性接收传值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Vue中的动态组件(v-bind:is)的使用及组件传值

  1. 在一个多标签的界面中使用 “ is ”特性来切换不同的组件:

<component v-bind:is ="currentTabComponent"></component>

  1. 有时候我们需要标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 元素将其动态组件包裹起来。
<!-- 失活的组件将会被缓存!-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
  1. 组件传值

父组件:
注册并引入局部(子)组件,(自定义组件名为子组件文件名称)
子组件:
通过props 属性接收父组件的传值,定义类型,模板中用 “is” 特性来进行切换

在这里插入图片描述

### Vue动态组件与父子组件之间 #### 使用 `v-bind` 和 `$emit` 实现父到子以及子到父的通信 在 Vue 中,可以利用 `<component>` 元素配合 `is` 属性来定义动态组件。对于父子组件间的通讯,则可以通过 `props` 将数据从父级递给子级,并通过自定义事件 (`$emit`) 来让子组件向父组件发送消息。 ```html <!-- ParentComponent.vue --> <template> <div class="container"> <!-- 动态切换显示不同的子组件 --> <button @click="currentTab = 'compA'">Show Comp A</button> <button @click="currentTab = 'compB'">Show Comp B</button> <!-- 渲染当前选中的组件递参数 --> <component :is="currentTab" :message="parentMsg"></component> <!-- 接收来自子组件的消息 --> <p>Received message from child: {{ receivedMessage }}</p> </div> </template> <script> import CompA from './components/CompA.vue'; import CompB from './components/CompB.vue'; export default { name: "ParentComponent", components: { CompA, CompB }, data() { return { currentTab: 'compA', parentMsg: 'Hello from Parent!', receivedMessage: '' } }, methods: { handleChildEvent(msg) { this.receivedMessage = msg; } } } </script> ``` 上述代码展示了如何在一个名为 `ParentComponent` 的父组件使用两个按钮控制不同子组件(`CompA`, `CompB`)之间的切换[^2]。这里的关键在于: - **动态渲染**:通过设置 `:is=currentTab` 让 Vue 根据变量 `currentTab` 的决定要加载哪个组件- **属性绑定**:`:message=parentMsg` 表达式用于将父组件的数据作为 prop 发送给被激活的那个子组件实例。 为了完成完整的双向交互模式,还需要考虑子组件如何响应这些 props 并反馈信息回给父组件。下面是一个简单的子组件模板: ```html <!-- ChildComponent.vue (通用结构适用于 CompA 或者 CompB)--> <template> <div> <h3>{{ title }}</h3> <input type="text" v-model="localCopyOfProp"/> <br/> <span>(This value comes from the parent)</span> </div> </template> <script> export default { props: ['message'], computed: { localCopyOfProp: { get() { return this.message; }, set(newValue) { // 当输入框内容改变时触发更新事件通知父组件 this.$emit('update:message', newValue); } } }, mounted(){ console.log(this.message); } }; </script> ``` 这段脚本说明了当用户修改输入框内的文本时,会调用 `set()` 方法并通过 `$emit` 向外发出一个带有新的通知。这样就形成了闭环式的双向绑定机制[^1]。 此外,如果想要更进一步处理非直系关系下的跨层组件交流问题,比如祖孙三代甚至多代之间的沟通需求,那么 Vuex 或者提供 / 注入 API 可能是更好的解决方案[^3]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值