Vue-动态组件

Vue-动态组件动态组件所谓的动态组件就是在不同的组件之间进行动态切换。Vue提供了一个特殊的元素<component>用来动态的挂载不同的组件使用is属性来选择要挂载的组件。<componentv-bind:is="mytemp"></componen

大家好,欢迎来到IT知识分享网。Vue-动态组件"

动态组件

  所谓的动态组件就是在不同的组件之间进行动态切换。

  Vue提供了一个特殊的元素<component>用来动态的挂载不同的组件 使用is 属性来选择要挂载的组件。

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

  mytemp可以是已经注册的组件的名字,也可以是一个组件的选项对象、

1.当mytemp是注册组件时

<template>、
<div id="app">
  <button @click="changeView('A')">切换到组件A</button>
  <button @click="changeView('B')">切换到组件B</button>
  <button @click="changeView('C')">切换到组件C</button>
  <component :is="currentView"></component>
</div>
</template>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      currentView: 'comA'
    },
    components: {
      comA: {
        template: '<div>组件A</div>'
      },
      comB: {
        template: '<div>组件B</div>'
      },
      comC: {
        template: '<div>组件C</div>'
      }
    },
    methods: {
      changeView(component) {
        this.currentView = 'com' + component;
      }
    }
  });
</script>

2.当mytemp是组件对象时

<template>
<div id="app">
  <component :is="currentView"></component>
</div>
</template>
<script>
  let Home = {
    template:'<div>这是一个组件</div>'
  }

  let vm = new Vue({
    el: "#app",
    data: {
      currentView: Home
    }
  });
</script>

  

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/32051.html

(0)
上一篇 2023-11-16 10:45
下一篇 2023-11-18 18:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信