vue中compoent用法（动态切换组件）

vue中compoent用法（动态切换组件）

写个切换组件的例子
1.新建两个vue子组件one.vue two.vue

<template>
  <div class=''>
      {{message}}
  </div>
</template>

<script>
export default {
  name:'one',
  data () {
    return {
      message:'我是one'
    };
  },
  mounted () {},
  methods: {}
}
</script>

<style lang='scss' scoped>
</style>

2.父组件中

<template>
  <div id="app">
    <component :is="flag"></component>
    <button @click="change">点击切换</button>
  </div>
</template>

<script>
import one from './components/one.vue'
import two from './components/two.vue'

export default {
  name: 'App',
  data () {
    return {
      flag:'two'  
    }
  },
  components: {
    one,
    two
  },
  methods: {
    change(){
      this.flag = this.flag == 'one'?'two':'one'
    }
  }
}
</script>

<style>

</style>

其中 :is的值用来决定哪个组件被渲染