1.动态组件
Vue.js 提供了一个特殊的元素<component> 用来动态地挂载不同的组件, 使用is特性来选择要挂载的组件。
示例如下:
<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,递归组件
组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了。
示例如下:
<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' });
渲染结果为:
<div id="app19"> <div> <div> <div><!----></div> </div> </div> </div>
设置name 后,在组件模板内就可以递归使用了,不过需要注意的是,必须给一个条件来限制递归数量,否则会抛出错误: max stack size exceeded 。
组件递归使用可以用来开发一些具有未知层级关系的独立组件,比如级联选择器和树形控件等。
3.组件卡槽solt
3.1 第一种用法
父组件: <templateSolt></templateSolt> <templateSolt> <p>slot分发了内容</p> </templateSolt>
子组件: <div> <h1>这是slot子组件</h1> <slot> 如果slot没有分发内容。 </slot> </div>
效果图如下:
我得理解,slot在父组件有内容时,显示为父组件得内容,覆盖了子组件,如果父组件没有内容,则显示子组件
3.2 第二种用法
这种用法是我们用得比较多得,这种是具名得slot
父组件 <templateSlotNamed> <h1 slot="footer">footer</h1> <h1 slot="header">header</h1> <h1>Default content</h1> </templateSlotNamed>
子组件 <div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div>
效果图如下:
我把父组件的header和footer更换了位置,
是为了证明一件事,就是实际内容的显示是由子组件的位置决定的。
4. 异步组件:页面需要用到时候才从服务端加载的组件。
原理:利用webpack对代码进行分割是异步调用组件前提。下面介绍的是怎么实现异步组件。
案例:
首先是组件,创建四个组件分别命名为first、second、three和four;内容如下:
first <template> <div>我是第一个页面</div> </template> second <template> <div>我是第二个页面</div> </template> three <template> <div>我是第三个页面</div> </template> four <template> <div>我是第四个页面</div> </template>
路由index.js代码,异步组件方式有两种,代码中的方案1和方案2;注意:方案1需要添加 syntax-dynamic-import
插件
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;