tofacebook.com -专业IT技术社区 【百家号】脸书百科,[Vue @Component] Dynamic Vue.js Components with the component element Web程序 - tofacebook.com-专业IT技术社区
74°

【百家号】脸书百科,[Vue @Component] Dynamic Vue.js Components with the component element Web程序

标签:can   anti   html   keep   post   ack   default   instead   class   

You can dynamically switch between components in a template by using the reserved <component> element and dynamically bind to its is attribute. By using <keep-alive> you can tell Vue to keep the component in memory.

 

In the previous post about dynamic component

<component :is="selectedComp"></component>

<script>
import Vue from "vue"
import { Component, Prop } from "vue-property-decorator"

const One = {
  functional: true,
  name: "One",
  render: h => <h1 class="bg-red">One</h1>
}

const Two = {
  functional: true,
  name: "Two",
  render: h => <h1 class="bg-green">Two</h1>
}

const Three = {
  functional: true,
  name: "Three",
  render: h => <h1 class="bg-purple">Three</h1>
}

@Component({
 components: { }
})
export default class App extends Vue {
  comps = [One, Two, Three]
  selectedComp = this.comps[0]
}
</script>

Because inside @Component({components: {}}) haven‘t register those component ‘One, Two, Three‘, so then using 

<component :is="selectedComp"></component>

‘selectedComp‘ has to ben a real functional component. 

 

But If we have registered the components:

@Component({
  components: {
     One, Two, Three
  }
})

The the ‘selectedComp‘ can be just component‘s name:

selectedComponent = ‘One‘ | ‘Two‘ | ‘Three‘

 

 

<keep-alive> Component: 

Components might have some state, you want to keep the state instead of losting it, you can use ‘keep-alive‘ component:

<keep-alive>
    <component v-bind:is="currentView" v-bind:initial-quantity="item.quantity" v-bind:name="item.text" v-bind:diet="item.diet"></component>
</keep-alive>

 

 

 

 

[Vue @Component] Dynamic Vue.js Components with the component element

标签:can   anti   html   keep   post   ack   default   instead   class   

原文地址:https://www.cnblogs.com/Answer1215/p/9374566.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: