专栏首页菜鸟计划vue组件详解(一)——组件与复用

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

一、什么是组件

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

二、组件用法

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

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

        <div id="app1">
            <my-component></my-component>
        </div>
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选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。如:

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

2.3 data必须是函数

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

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

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    柴小智
  • vue组件详解(五)——组件高级用法

    一、递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了。 示例如下: <div id="app19"> ...

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

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

    柴小智
  • Vue.js - 组件快速入门(上)

    组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树:

    Vincent-yuan
  • 来吧!一文彻底搞定Vue组件!

    组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么。

    达达前端
  • Vue组件封装的过程

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

    我不是费圆
  • 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组...

    外婆的彭湖湾
  • 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    一、表单输入绑定 1.1、基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,...

    张果
  • 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法...

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

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

    柴小智

扫码关注云+社区

领取腾讯云代金券