Vue中的动态组件

最新推荐文章于 2024-06-26 19:52:51 发布

于思杨

最新推荐文章于 2024-06-26 19:52:51 发布

阅读量667

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/huhu_nihao/article/details/93785810

版权

Vue中的动态组件

1. 什么是动态组件？

可以改变的组件

2. 使用

通过 Vue 提供了一个 component + is 属性

3. 动态组件指的就是 component 这个组件

4. 案例

点击一个按钮进行两个组件的切换：

<body>
  <div id="app">
    <button @click = "change"> 切换 </button>
    <!-- <keep-alive include="">
      <component :is = "type"></component>
    </keep-alive> -->
    
    
    <component :is = "type"></component>

  </div>
</body>

<script>
  Vue.component('Aa',{
    template: '<div> Aa </div>'
  })

  Vue.component('Bb',{
    template: '<div> Bb </div>'
  })

  new Vue({
    data: {
      type: 'Aa'
    },
    methods: {
      change () {
        this.type = (this.type === 'Aa'?'Bb':'Aa')
      }
    }
  }).$mount('#app')
</script>

5. Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存，这样当我们切换组件时，就可以大大提高使用效率

6. keep-alive也可以以属性的形式呈现，但是我们如果搭配component的话，建议使用组件的形式

于思杨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue中的动态组件

Vue中的动态组件1. 什么是动态组件？可以改变的组件2. 使用通过 Vue 提供了一个 component + is 属性3. 动态组件指的就是 component 这个组件4. 案例点击一个按钮进行两个组件的切换：<body> <div id="app"> <button @click = "ch...
复制链接

扫一扫