vue入门篇(八):组件详解

一、前言

由于组件的出现,我们的系统被构建成一块一块的组件,它们实现各自特定的功能,而且具有复用性,解决了传统开发高耦合的痛点。有了组件我们的系统可以被构建成这样(官网的图):
在这里插入图片描述
以后维护起来只需要在对应的组件修改代码即可,不会影响其他部分,而且配合ES6中的模块化使得我们项目变得更加容易维护。除此之外,组件化是Vue的核心,所以可见它是多么地重要了。下面我将详细介绍如何使用组件。

二、组件注册

组件有两种注册方式,一种是局部注册,另一种是全局注册。而在讲解组件注册之前,我想先说一下组件的命名规范,因为命名规范可以提高代码的可读性。

2.1 组件命名规范
  • 单文件组件(.vue)最好使用MyComponent.vue这种PascalCase风格。当然使用横线连接 (kebab-case)的风格也是可以的,只不过你必须统一使用一种风格,个人还是推荐前者。
  • 基础组件(只有展示样式、无逻辑、无状态)使用BaseAppV开头,如BaseButton.vue
  • 单例组件(每个页面只能使用一次,而且不接收prop)使用The开头,如TheSidebar.vue
  • 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。如:TodoList.vue、TodoListItem.vue、TodoListItemButton.vue
  • 在单文件组件(.vue)、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
  • 在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。
  • Vue.component(下面会讲解)这种方式注册的组件有两种风格kebab-casePascalCase,区别在于在Dom模板中只能识别前者,而后者只能在单文件、字符串模板、JSX中使用

更多规范请看文档:风格指南

2.2 全局注册

我们先看看全局注册的组件怎么定义

Vue.component("my-component", {
   
  //组件属性
});

比如我有一个 todo-item的组件,来实现一个todolist的功能:

//注册一个列表组件,名为todo-item,也可以是TodoItem
Vue.component("todo-item", {
   
  //通过props接收父组件的数据
  props: ["content"],
  template: "<li>{
   {content}}</li>"
});
  
const app = new Vue({
   
  el: "#app",
  data: {
   
    inputValue: "",
    list: []
  },
  methods: {
   
    handleBtnClick() {
   
      if (this.inputValue != "") {
   
        this.list.push(this.inputValue);
        this.inputValue = "";
      }
    }
  }
});
<div id="app"
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值