vue 组件
  • 组件化开发：把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护，组件的后缀名是 .vue。
  • . vue 组件的三个组成部分
  • template ： 组件的模板结构（必须包括）
  • script ：组件的 JavaScript 行为（可选）
  • style ：组件的样式（可选）
  • 组件实例：
//需要在main.js中导入：import Test from './Test.vue'
//同时将main.js中的render指向Test

//Test.vue代码：
<template>
  <div class="test-app">
    <h1>用户定义： --- {{ username }}</h1>
  </div>
</template>


<script>  
export default {
  //vue组件中的data不能使用之前的方式指向对象，data必须是个函数
  data() {
    //return出去的{}中，可以定义数据
    return {
        username: 'lizhi'
    }
  }
}
</script>

<style>   //启用less语法：<style lang="less">

.test-app{
    background-color: pink;
}
</style>

ps: template中只能有唯一的根节点

使用组件
  • 三个步骤（举例是在components目录下创建Left.vue和Right.vue）
  • 步骤1：使用 import 语法导入需要的组件
  • 步骤2：使用 components 节点注册组件
//1,2步骤在APP.vue中
<script>
// 1. 导入需要使用的 .vue 组件
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
  data() {
    return {
      flag: true
    }
  },
  // 2. 注册组件
  components: {
    Left,
    Right,
  }
}
</script>
  • 步骤3：以标签形式使用刚才注册的组件
//template中   
<div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 3. 以标签形式，使用注册好的组件 -->
      <Left></Left>
      <Right></Right>
    </div>
  • 通过components注册的是私有子组件，不能在其他组件使用；可以在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件：
//创建了Count.vue
// 导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'
Vue.component('MyCount', Count)
组件的props属性
  • props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性。
<script>
export default {
  // 自定义属性的名字，是封装者自定义的（只要名称合法即可）
  // props 中的数据，可以直接在模板结构中被使用
  
//props中的数据是只读的
  props: ['自定义属性A','自定义属性B'...]
  
  data(){
      return{}
  }
}
</script>
  • props用属性写法：
props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
  ......
    init: {
      // 默认值default
      default: 0,
      
          // 设置值类型必须是 Number 数字,否则报错
      type: Number,
      
          // 表示必填项校验
      required: true
    }
组件之间的样式冲突
  • 默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。原因是：
    ① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
    ② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素
  • 解决方法：vue 为 style 节点提供了 scoped 属性,为组件样式都添加属性选择器[data-v-xxx]
  • /deep/ 样式穿透
    如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。简单来说，就是在样式前生成[data-v-xxx].