13.1,组件的概述

什么是组件

组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的主键,来划分不同的功能模块,将来我们需要什么样的功能,就就可以直接去调用对应的组件即可

组件化和模块化的不同

  • 模块化,是从代码的逻辑角度划分的
  • 组件化,是从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用

如何定义全局组件

方式一

  1. 使用Vue.extend来创建全局的Vue组件(全局)(template用于定义组件信息)

  2. 使用Vue.component('组件的名称',创建出来的组件模板对象)

    组件的名称就是将来在引用时可以直接使用标签的形式引用

实例:

注意的是,在注册的时候,可以使用驼峰命名法,但是在使用的时候遇到驼峰,需要以-的形式解析

例如在注册时组件名称是myCode,那么他的标签就是“my-code”

直接创建

Vue.component('myCode',Vue.extend({
    template:"

这个使用第二种方式创建的html

" }))

这一步,就相当于匿名的使用,直接将创建extend的对象拿过来放在一起使用

方式二

Vue.componse('myCode',{

    template:'

第二种方式创建组件

' })

这种方式要简单一点

而且这样创建的组件,不能有两个平级的两个元素,也就是说在template中支持使用

这是第一个

这是第二个

使用一个div包裹一下

不允许使用这样

这是第一个

这是第二个

无论是哪种方式创建的组件,组件的template属性指向的模板内容必须有且只有一个根标签

方式三

将组件的template对应的模板结构丢在外面定义

具体使用:

  1. 定义一个组件

    Vue.component('myCode1',{
     template:'#temp1'
    })
    
  2. 在被el标记的标签的外部定义template的模板结构

    
    

注意点是,这个template的模板结构必须是在未定义的Vue信息外部定义


1556434715683.png

定义局部(私有)组件

这个时候就有下一个components组件

这种定义私有组件的形式的定义方法

components:{
    组件名:{
        template属性
    }
}
var vm=new Vue({
    el:'#app',
    data:{},
    components:{
        myCode:{
            template:'

哈哈哈哈哈

' } } })

组件中的data和methods

  1. 组件可以有自己的data
  2. 组件的data和实例的data有点不一样,实例中的data可以是一个对象,但是组件中的data必须是一个方法
  3. 组件的data除了必须是一个方法之外,这个方法内部,还必须返回一个对象才行
  4. 组件中的data数据使用方式和实例中data的使用方式完全一样

你可能感兴趣的:(13.1,组件的概述)