1. Dynamic Component
Vue.js provides a special element <component> used to dynamically loading different components, is used to select the characteristics of the components to be mounted.
Examples are as follows:
<div id="app21">
<component :is="currentView"></component> <button @click="changeView('A')">切换到A</button> <button @click="changeView('B')">切换到B</button> <button @click="changeView('C')">切换到C</button> </div> var app21 = new Vue({
el: '#app21',
data: { currentView: 'comA' }, methods: { changeView: function(data){ this.currentView = 'com'+ data //动态地改变currentView的值就可以动态挂载组件了。 } }, components: { comA: { template: '<div>组件A</div>' }, comB: { template: '<div>组件B</div>' }, comC: { template: '<div>组件C</div>' } } }); 2, recursive components
Components within its template calls itself recursively, just to name component settings options on it.
Examples are as follows:
<div id="app19">
<my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{
name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。
props: {
count: { type: Number, default: 1 } }, template: '<div><my-component19 :count="count+1" v-if="count<3"></my-component19></div>' }); var app19 = new Vue({ el: '#app19' }); Rendering results:
<div id="app19">
<div> <div> <div><!----></div> </div> </div> </div> After setting the name, in the assembly template can be used recursively, but it needs attention is the need to limit the number of recursion to a condition, otherwise it will throw an error: max stack size exceeded.
Component recursively be used to develop a number of independent components having a hierarchical relationship is unknown, such as tree cascade control selector and the like.
3. Component slot solt
3.1 The first usage
Parent component
<templateSolt></templateSolt>
<templateSolt> <p>slot分发了内容</p> </templateSolt> Subassembly
<div>
<h1>这是slot子组件</h1> <slot> 如果slot没有分发内容。 </slot> </div> The effect is as follows:
I have to understand, slot when the parent component has content, content must show the parent component, covering sub-assemblies, parent component if no content is displayed subcomponents
3.2 second use
This usage is more than we have, which is to be named, was slot
parent component
<templateSlotNamed>
<h1 slot="footer">footer</h1> <h1 slot="header">header</h1> <h1>Default content</h1> </templateSlotNamed> Subassembly
<div>
<slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> The effect is as follows:
I put the header and footer of the parent component replacement position,
in order to prove one thing, that show the actual content is determined by the position of the sub-assembly.
4. asynchronous component: page need to use the component when it is loaded from the server.
Principle: the use of code division webpack is an asynchronous call to the component premise. Here is how to implement asynchronous components.
Case:
The first is the component that creates four components are named first, second, three and four; as follows:
first
<template>
<div>我是第一个页面</div> </template> second <template> <div>我是第二个页面</div> </template> three <template> <div>我是第三个页面</div> </template> four <template> <div>我是第四个页面</div> </template> Index.js routing codes, there are two ways the asynchronous component, code Scheme 1 and Scheme 2; note: the program need to add a syntax-dynamic-import plugin
import Vue from 'vue'
import VueRouter from 'vue-router' /*import First from '@/components/First' import Second from '@/components/Second'*/ Vue.use(VueRouter) //方案1 const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue"); const second = ()=>import(/* webpackChunkName: "group-foo" */ "../components/second.vue"); const three = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/three.vue"); const four = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/four.vue"); //方案2 const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1') const second = r => require.ensure([], () => r(require('../components/second.vue')), 'chunkname1') const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2') const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2') //懒加载路由 const routes = [ { //当首次进入页面时，页面没有显示任何组件；让页面一加载进来就默认显示first页面 path:'/', //重定向，就是给它重新指定一个方向，加载一个组件； component:first }, { path:'/first', component:first }, { path:'/second', component:second }, { path:'/three', component:three }, { path:'/four', component:four } //这里require组件路径根据自己的配置引入 ] //最后创建router 对路由进行管理，它是由构造函数 new vueRouter() 创建，接受routes 参数。 const router = new VueRouter({ routes }) export default router;