HTML
<input type="button" @click="showchild" value="show"> //点击按钮后，show为真,先获取child组件，再渲染div内容
<div id="contain" v-if="show">
<child></child>
</div>
JS
data () {
return {
msg: 'Welcome to Your Vue.js App',
show:false
}
},
methods: {
showchild:function(){
this.show=true;
}
},
components: {
'child': function(resolve) {
require(['./components/child.vue'], resolve);
}
}
注意：加载异步组件的时候，组件名后边的.vue不要忽略。这个例子应该比较直观了。点击按钮之后改变了变量show的布尔值为真，由于child.vue是异步组件，所以会先ajax获取组件然后渲染。
网友评论