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>
说明：
初始情况下，vm.$children属性中只有一个元素（first组件），点击按钮切换后，vm.$children属性中有两个元素，再次切换后，则有三个元素（三个子组件都保留在内存中）。
之后无论如何切换，将一直保持有三个元素。
④activate钩子
简单来说，他是延迟加载。
例如，在发起ajax请求时，会需要等待一些时间，假如我们需要在ajax请求完成后，再进行加载，那么就需要用到activate钩子了。
具体用法来说，activate是和template、data等属性平级的一个属性，形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件。
为了证明他的延迟加载性，在服务器端我设置当发起某个ajax请求时，会延迟2秒才返回内容，因此，第一次切换组件2时，需要等待2秒才会成功切换：
<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];
}
console.log(this.$children);
}
},
components: {
first: { //第一个子组件
template: "<div>这里是子组件1</div>"
},
second: { //第二个子组件
template: "<div>这里是子组件2，这里是ajax后的内容：{{hello}}</div>",
data: function () {
return {
hello: ""
}
},
activate: function (done) { //执行这个参数时，才会切换组件
var self = this;
$.get("/test", function (data) { //这个ajax我手动在服务器端设置延迟为2000ms，因此需要等待2秒后才会切换
self.hello = data;
done(); //ajax执行成功，切换组件
