Vuejs2.0学习笔记-深刻理解组件

原创
2019/03/04 14:32
阅读数 83

组件是什么? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素。

  • Step1.定义组件
//定义组件,即自定义
Vue.component('my-component', {
    template: '<h2>整个世界</h2>'
})

  • Step2. 使用组件
<div id='itany'>
    {{message}}
    <br>
    <!-- 使用自定义组件 -->
    <my-component></my-component>
</div>

输出结果:

从vue-devtools插件上看:该demo程序有两个组件,一个是Root, 一个是MyComponent,很显然,自定义的组件my-component被转换为MyComponent;而另一个Root是什么鬼东西呢?看其有一个数据为message:"hello"判断其为vue实例。

二、组件的分类:

  • 全局组件,使用Vue.component定义
//定义全局组件
Vue.component('my-component', {
template: '<h2>全局组件: {{name}}</h2>',
// 组件用函数储存变量
    data: function(){
        return {
            name: 'Bill Gates'
        }
     }
    })
  • 局部组件,在Vue实例内部使用选项定义
new Vue({
    el: '#itany',
        data: {
            message: 'hello'
        },
//定义局部组件
components: {
    'my-inner-component': {
        template: '<h3>局部组件:{{name}}</h3>',
       //组件用函数储存变量
       data() {
           return {
               name: 'Jobs'
           }
        }
      }
  }
})

备注:其中组件也能存数据,与Root组件Vue不同的是:组件用data函数存储数据,而非用data对象存储数据。

三、组件引用模版,即:当template元素中的内容太多时,不方便编写代码,Vue提供了一个<<template></template>标签对内容进行抽取,然后进行关联,demo事例如下:

结果为:

备注:定义组件时,仅仅是组件的注册,并没有实例化,当在html中使用时才实例化;

三、动态组件:多个组件在同一个挂载点动态切换,使用Vue提供的<component :is>

结果为:

四、<keep-alive></keep-alive>使用keep-alive避免切换组件时重新渲染,可以把切换出去的值存放到内存中,切换回来后直接使用

<keep-alive>
    <component :is="flag"></component>
</keep-alive>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部