vue中component标签的使用

你是否还在用v-if/v-show来控制tab切换时展示哪个组件/页面吗？如果你知道了component这个vue的内置组件的用法代码会简化好多。下面我为大家介绍下component组件的基本使用。

父组件

<template>
  <div class="component">
    <el-tabs v-model="activeName">
      <el-tab-pane name="comA" label="组件A"></el-tab-pane>
      <el-tab-pane name="comB" label="组件B"></el-tab-pane>
    </el-tabs>
    <component :is="componentId" :params="params"></component>
  </div>
</template>

<script>
import comA from "@/components/comA.vue"
import comB from "@/components/comB.vue"
  export default {
    components: {
      comA,
      comB
    },
    data() {
      return {
        activeName: "comA"
      }
    },
    computed: {
      componentId() {
        return this.activeName 
      },
      params() {
        return this.activeName === 'comA'? 'a数据' : 'b数据'
      }
    }
  }
</script>

子组件A

<template>
  <div>
    我是组件A
  </div>
</template>

<script>
  export default {
    props: {
      params: String
    },
    mounted () {
      console.log(this.params)
    }
  }
</script>

子组件B

<template>
  <div>
   我是组件B
  </div>
</template>

<script>
  export default {
    props: {
      params: String
    },
    mounted () {
      console.log(this.params)
    }
  }
</script>

展示效果

补充： 以上写的是最基本的用法，还有更多场景可使用，可参考这里