Vue组件的基本介绍

最新推荐文章于 2024-05-16 09:49:51 发布

ANGWH

最新推荐文章于 2024-05-16 09:49:51 发布

阅读量374

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ANGWH/article/details/107746588

版权

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

组件分为全局组件，局部组件

组件的使用

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

全局组件

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

局部组件

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

复合组件

  Vue.component('list-component',{
     template:`<ul>
          <li>test01</li>
          <item-component></item-component>
      </ul>`
  })
  Vue.component('item-component',{
      template:`<li>test02</li>`
  })

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

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

绑定数据和传值

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

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

ANGWH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件的基本介绍

组件 (Component) 是 Vue.js 最强大的功能之一，使用组件化方式开发，可以封装可重用的代码，减少重复劳动组件分为全局组件，局部组件组件的使用<body> 组件的使用和标签的使用是一样的,都遵循html的语法规范 <demo-component></demo-component> </test-component></test-component></body>全局组件 Vue.compone
复制链接

扫一扫