這篇文章主要介紹了vue components 動(dòng)態(tài)組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

<!-- DynamicComponent.vue -->
<template>
  <section>
    <div v-for="(item, index) in componentData" :key="index">
      <components :is='item.componentName' :params="item.content" />
    </div>
  </section>
</template>
<script>
import PageOne from './pageComponents/PageOne'
import PageTwo from './pageComponents/PageTwo'
import PageThree from './pageComponents/PageThree'
export default{
  name: 'DynamicComponent',
  components: {
    PageOne,
    PageTwo,
    PageThree
  },
  data () {
    return {
      componentData: [
        {
          componentName: 'PageOne',
          content: {
            title: '標(biāo)題一'
          }
        },
        {
          componentName: 'PageTwo',
          content: {
            title: '標(biāo)題二'
          }
        }
      ]
    }
  }
}
</script>

<!-- PageOne -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageOne',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<!-- PageTwo -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageTwo',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

數(shù)組發(fā)生變化時(shí)，動(dòng)態(tài)加載相應(yīng)數(shù)據(jù)

場(chǎng)景：點(diǎn)擊不同組件名稱(chēng)，界面顯示相應(yīng)組件

步驟一：導(dǎo)入所需組件

步驟二：點(diǎn)擊 tab 選項(xiàng)卡，將對(duì)應(yīng)組件名添加進(jìn)數(shù)組

步驟三：使用動(dòng)態(tài)組件，:is 屬性綁定組件名

<div v-for="(item, index) in componentData" :key="index">
  <components :is="item.componentName"/>
</div>

案例：監(jiān)聽(tīng)對(duì)象中屬性變化，深度監(jiān)聽(tīng)

<!-- DynamicComponent.vue -->
<template>
  <section>
    <div v-for="(item, index) in componentData" :key="index">
      <components :is='item.componentName' :params="item.content" />
    </div>
  </section>
</template>
<script>
import PageOne from './pageComponents/PageOne'
import PageTwo from './pageComponents/PageTwo'
import PageThree from './pageComponents/PageThree'
export default{
  name: 'DynamicComponent',
  components: {
    PageOne,
    PageTwo,
    PageThree
  },
  data () {
    return {
      componentData: [
        {
          componentName: 'PageOne',
          content: {
            title: '標(biāo)題一'
          }
        },
        {
          componentName: 'PageTwo',
          content: {
            title: '標(biāo)題二'
          }
        }
      ]
    }
  }
}
</script>

<!-- PageOne -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageOne',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<!-- PageTwo -->
<template>
  <section>
    {{content}}
  </section>
</template>
<script>
export default{
  name: 'PageTwo',
  props: {
    params: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  data () {
    return {
      content: this.params.title
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal){
        this.content = newVal.title
      },
      deep: true,
      immediate: true
    }
  }
}
</script>