Vue组件的基本介绍

组件 (Component) 是 Vue.js 最强大的功能之一,使用组件化方式开发,可以封装可重用的代码,减少重复劳动

组件分为全局组件,局部组件

组件的使用

<body>
	 组件的使用和标签的使用是一样的,都遵循html的语法规范
	 <demo-component>demo-component> 
	 test-component>test-component>
body>

全局组件

  Vue.component('demo-component',{//配置项
     template:`
hello world
`
//模板 })

局部组件

var vm = new Vue({
    el:"#app",
    data:{ 
    },
    // 局部组件
    components:{
        'test-component':{
            template:`
this is a component
`
} }, })

复合组件

  Vue.component('list-component',{
     template:`
  • test01
`
}) Vue.component('item-component',{ template:`
  • test02
  • `
    })

    要注意的是 tmplate 只能是单个根元素

    Vue.component('item-component',{
          template:`
  • test02
  • test03
  • `
    }) //vue会显示一个错误 //every component must have a single root element (每个组件必须只有一个根元素)。

    绑定数据和传值

    Vue.component('list-component',{//配置项
        template:`
    • {{name}}
    `
    , data(){//绑定数据 return { count : 0 } }, //数组形式 // props:['name'] // 对象形式的可以给传参做限制 props:{ name:{ type:String,//设置传值的类型 default:'hdz',//设置传值的默认值 required:true,//设置是否为必须传值 } } }) //组件中可以相互传值

    组件是可复用的实例,一个网页中某一个部分需要在多场景中使用,可以抽成一个组件进行复用,提高代码复用性
    组件化开发能大幅度的提高应用开效率、测试性、复用性,
    合理划分组件,有助于提升应用性能,对数据频繁更新的内容单独创建一个组件。
    开发过程中组件应该是高内聚、低耦合,组件的本质就是独立和可复用代码组织单元,低耦合:复用、测试、维护不与其他组件存在过多的耦合关系,与外部依赖小,高内聚:一个模块内各个元素彼此结合的紧密程度高,实质一个软件模块是由相关性很强的代码组成, 只负责一项任务, 也就是常说的单一责任原则。

    你可能感兴趣的:(Vue组件的基本介绍)