Vue内置组件之component标签

Vue自带的标签有:component,transition,transition-group,keep-alive,slot
在这里插入图片描述
在这里我先介绍component标签: 它是Vue内置的标签,它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.
比如:这个效果效果:
在这里插入图片描述
代码如下:

<body>
    <div id="app">
        <component :is="who"></component>
        <button @click="changeComponent">changeComponent</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let componentA={
            template:`<div>I am componentA</div>`
        }
        let componentB={
            template:`<div>I am componentB</div>`
        }
        let componentC={
            template:`<div>I am componentC</div>`
        }

      let app = new Vue({
        el: '#app',
        data:{
            who:'componentB'
        },
        components:{
            "componentA":componentA,
            "componentB":componentB,
            "componentC":componentC
        },
        methods: {
            changeComponent(){
                if(this.who=="componentA"){
                    this.who="componentB"
                }
                else if(this.who=="componentB"){
                    this.who="componentC" 
                }else{
                    this.who="componentA"  
                }
            }
        },
      })
    </script>
  </body>
### Vue 动态组件 `<component>` 的参数传递 在 Vue 中,动态组件 `<component>` 可以通过 `:is` 属性来指定要渲染的具体组件名称。为了向动态组件传递参数,可以利用 Vue 提供的标准属性绑定机制实现数据传输。 以下是具体的实现方式: #### 使用 `v-bind` 或者简写语法 `:` 进行参数传递 可以通过 `v-bind` 将父级的数据作为 props 传递到子组件中。例如,在模板部分可以直接使用以下代码完成参数传递[^1]: ```vue <template> <keep-alive> <!-- 绑定 is 属性并传递 parentProp 参数 --> <component :is="currentComponent" :parent-prop="parentProp"></component> </keep-alive> </template> <script> export default { props: { parentProp: { type: String, required: true } }, data() { return { currentComponent: 'YourDynamicComponent' // 当前显示的动态组件名 }; } }; </script> ``` 在此示例中,`:is` 被用来决定当前应该加载哪个组件,而 `:parent-prop` 则用于将来自父组件的数据传递至目标动态组件。 #### 关于 `keep-alive` 缓存的作用 如果希望减少不必要的重新渲染操作,则可以在外部嵌套一层 `<keep-alive>` 来缓存那些未被激活但仍需保留状态的组件实例[^3]。这有助于提升性能表现,尤其是在频繁切换多个相似功能模块的情况下尤为有用。 #### 配合路由使用的场景说明 尽管本案例并未涉及具体路径配置相关内容,但在实际开发过程中,有时也会结合 vue-router 实现更复杂的交互逻辑[^4]。不过需要注意的是,此时应区分清楚两者之间的职责边界——前者负责局部区域内的灵活变化处理;后者则主要针对全局导航层面提供支持服务。 综上所述,上述方法展示了如何借助标准 prop 系统以及特殊指令(如 `:is`),轻松达成跨不同类型的 Vue 子部件间的信息共享需求。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值