专栏首页菜鸟计划vue组件详解(五)——组件高级用法

vue组件详解(五)——组件高级用法

一、递归组件

组件在它的模板内可以递归地调用自己, 只要给组件设置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 。

组件递归使用可以用来开发一些具有未知层级关系的独立组件,比如级联选择器和树形控件等。

二、内联模板

组件的模板一般都是在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'
});

三、动态组件

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>'
        }
    }
});

四、异步组件

当你的工程足够大, 使用的组件足够多时, 是时候考虑下性能问题了, 因为一开始把所有的组件都加载是没必要的一笔开销。

好在Vue.js 允许将组件定义为一个工厂函数,动态地解析组件。Vue. 只在组件需要渲染时触发工厂函数, 并且把结果缓存起来,用于后面的再次渲染。

        <div id="app22">
            <my-component22></my-component22>
        </div>
Vue.component('my-component22',function(resolve, reject){
    window.setTimeout(function(){
        resolve({
            template: '<div>我是异步渲染的</div>'
        })
    },2000)
});

var app22 =  new Vue({
    el: '#app22'
});

工厂函数接收一个resolve 回调,在收到从服务器下载的组件定义时调用。也可以调用reject( reason )指示加载失败。 这里setTimeout 只是为了演示异步,具体的下载逻辑可以自己决定,比如把组件配置写成一个对象配置,通过Ajax 来请求,然后调用resolve 传入配置选项。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue组件详解(二)——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是...

    柴小智
  • vue组件详解(一)——组件与复用

    一、什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 二、组件用法 组件需要注册后...

    柴小智
  • vue组件详解(三)——组件通信

    组件之间通信可以用下图表示: ? 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。 一、自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。...

    柴小智
  • Vue组件封装的过程

    A、调用Vue.extend(),创建名为myCom的组件,template定义模板的标签,模板的内容需写在该标签下

    我不是费圆
  • Vue组件基础--简单了解vue组件

    组件就像是提前做好的模具,使用时拿出来就行,可以重复调用,它跟普通的Vue有一样的属性:

    我不是费圆
  • react小结

    在react中,父组件给子组件传递数据时,就是以上的方式,通过给子组件设置props,子组件获取props中的值便可完成数据传递。 

    超然
  • Vue创建项目及基本语法 一

    ​ 本文档仅作为个人学习笔记、详细内容可以查看官网文档,官方文档有更详细的使用说明及案例

    梅花
  • 【DB笔试面试535】在Oracle中,数据库处于RESTRICT、QUIESCE和SUSPEND状态的区别是什么?

    在Oracle中,数据库处于RESTRICT、QUIESCE和SUSPEND状态的区别是什么?

    小麦苗DBA宝典
  • elasticsearch geo_point 地理位置过滤 按经度排序

    "poi": [           113.40780444444,           22.920241666667       ],

    双面人
  • 腾讯课堂点播上云客户端实践总结

    点播业务目前用的是 HLS 协议。HLS协议全称是 HTTP Live Streaming,它是一个由苹果提出的基于HTTP的流媒体网络传输协议。HLS协议规定...

    腾小云

扫码关注云+社区

领取腾讯云代金券