一, 递归组件
组件在它的模板内可以递归地调用自己, 只要给组件设置 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'
- });
- // 前端全栈学习交流圈: 866109386
- // 面向 1-3 经验年前端开发人员
- // 帮助突破技术瓶颈, 提升思维能力
渲染结果为:
- <div id="app19">
- <div>
- <div>
- <div><!----></div>
- </div>
- </div>
- </div>
设置 name 后, 在组件模板内就可以递归使用了, 不过需要注意的是, 必须给一个条件来限制递归数量, 否则会抛出错误: max stack size exceeded .
组件递归使用可以用来开发一些具有未知层级关系的独立组件, 比如级联选择器和树形控件等.
二, 内联模板
组件的模板一般都是在 template 选项内定义的, Vue 提供了一个内联模板的功能, 在使用组件时, 给组件标签使用 inline-template 特性, 组件就会把它的内容当作模板, 而不是把它当内容分发, 这让模板更灵活.
示例如下:
- <div id="app20">
- <my-component20 inline-template>
- <div>
- <h3 > 在父组件中定义子组件的模板 </h3>
- <p>{{msg}}</p>
- </div>
- </my-component20>
- </div>
- Vue.component('my-component20',{
- data: function(){
- return {
- msg: '在子组件声明的数据'
- }
- }
- });
- var app20 = new Vue({
- el: '#app20'
- });
- // 前端全栈学习交流圈: 866109386
- // 面向 1-3 经验年前端开发人员
- // 帮助突破技术瓶颈, 提升思维能力
三, 动态组件
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>'
- }
- }
- });
- // 前端全栈学习交流圈: 866109386
- // 面向 1-3 经验年前端开发人员
- // 帮助突破技术瓶颈, 提升思维能力
四, 异步组件
当你的工程足够大, 使用的组件足够多时, 是时候考虑下性能问题了, 因为一开始把所有的组件都加载是没必要的一笔开销.
好在 Vue.JS 允许将组件定义为一个工厂函数, 动态地解析组件. Vue. 只在组件需要渲染时触发工厂函数, 并且把结果缓存起来, 用于后面的再次渲染.
- <div id="app22">
- <my-component22></my-component22>
- </div>
- Vue.component('my-component22',function(resolve, reject){
- Windows.setTimeout(function(){
- resolve({
- template: '<div > 我是异步渲染的 </div>'
- })
- },2000)
- });
- var app22 = new Vue({
- el: '#app22'
- });
工厂函数接收一个 resolve 回调, 在收到从服务器下载的组件定义时调用. 也可以调用 reject( reason ) 指示加载失败.
这里 setTimeout 只是为了演示异步, 具体的下载逻辑可以自己决定, 比如把组件配置写成一个对象配置, 通过 Ajax 来请求, 然后调用 resolve 传入配置选项.
来源: http://www.qdfuns.com/article/51070/b0b6cecc99a089401524a97a31cd70b3.html