Vue.js动态组件解析

本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 

本文是在官方文档的基础上，更加细致的说明，代码更多更全。
简单来说，更适合新手阅读 

①简单来说： 

就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 

②动态切换： 

在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；

改变挂载的组件，只需要修改is指令的值即可。 

如示例代码：

 <div id="app"> <button @click="toshow">点击让子组件显示</button> <component v-bind:is="which_to_show"></component></div><script> var vm = new Vue({ el: '#app', data: { which_to_show: "first" }, methods: { toshow: function () { //切换组件显示 var arr = ["first", "second", "third", ""]; var index = arr.indexOf(this.which_to_show); if (index < 3) {  this.which_to_show = arr[index + 1]; } else {  this.which_to_show = arr[0]; } } }, components: { first: { //第一个子组件 template: "<div>这里是子组件1</div>" }, second: { //第二个子组件 template: "<div>这里是子组件2</div>" }, third: { //第三个子组件 template: "<div>这里是子组件3</div>" }, } });</script>

说明： 

点击父组件的按钮，会自动切换显示某一个子组件（根据which_to_show这个变量的值来决定）。

③keep-alive

简单来说，被切换掉（非当前显示）的组件，是直接被移除了。 

在父组件中查看this.$children属性，可以发现，当子组件存在时，该属性的length为1，而子组件不存在时，该属性的length是0（无法获取到子组件）；

假如需要子组件在切换后，依然需要他保留在内存中，避免下次出现的时候重新渲染。那么就应该在component标签中添加keep-alive属性。

如代码：

 <div id="app"> <button @click="toshow">点击让子组件显示</button> <component v-bind:is="which_to_show" keep-alive></component></div><script> var vm = new Vue({ el: '#app', data: { which_to_show: "first" }, methods: { toshow: function () { //切换组件显示 var arr = ["first", "second", "third", ""]; var index = arr.indexOf(this.which_to_show); if (index < 3) {  this.which_to_show = arr[index + 1]; } else {  this.which_to_show = arr[0]; } console.log(this.$children); } }, components: { first: { //第一个子组件 template: "<div>这里是子组件1</div>" }, second: { //第二个子组件 template: "<div>这里是子组件2</div>" }, third: { //第三个子组件 template: "<div>这里是子组件3</div>" }, } });</script>