前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue组件详解(一)——组件与复用

vue组件详解(一)——组件与复用

作者头像
柴小智
发布2018-04-10 18:04:42
1.1K0
发布2018-04-10 18:04:42
举报
文章被收录于专栏:菜鸟计划

一、什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

二、组件用法

组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。

2.1 全局注册后,任何V ue 实例都可以使用。如:

代码语言:javascript
复制
        <div id="app1">
            <my-component></my-component>
        </div>
代码语言:javascript
复制
Vue.component('my-component',{
   template: '<div>这里是组件的内容</div>'
});

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

 要在父实例中使用这个组件,必须要在实例创建前注册,之后就可以用<my-component></my- component> 的形式来使用组件了

template的DOM结构必须被一个元素包含, 如果直接写成“这里是组件的内容”, 不带“<div></ div >”是无法渲染的。(而且最外层只能有一个根的<div>标签)

2.2 在Vue 实例中,使用component选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。如:

代码语言:javascript
复制
        <div id="app2">
            <my-component1></my-component1>
        </div>
代码语言:javascript
复制
var app2 = new Vue({
   el: '#app2',
   components:{
      'my-component1': {
          template: '<div>这里是局部注册组件的内容</div>'
      }
    }
});

2.3 data必须是函数

除了template选项外,组件中还可以像Vue实例那样使用其他的选项,比如data 、computed 、methods等。但是在使用data时,和实例稍有区别, data 必须是函数,然后将数据return 出去。

代码语言:javascript
复制
        <div id="app3">
            <my-component3></my-component3>
        </div>
代码语言:javascript
复制
Vue.component('my-component3',{
    template: '<div>{{message}}</div>',
    data: function(){
        return {
            message: '组件内容'
        }
    }
});
var app3 = new Vue({
    el: '#app3'
});

一般return的对象不要引用外部的对象,因为如果return 出的对象引用了外部的一个对象, 那这个对象就是共享的, 任何一方修改都会同步。

所以一般给组件返回一个新的独立的data对象。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-04-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档