[JavaScript知识库]16、组件

1、什么是组件化开发

? 根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护

2、vue组件的三个组成部分

• template -> 组件的模板结构
• script -> 组件的 JavaScript 行为
• style -> 组件的样式
• 每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分

3、template

• template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
• template 中只能包含唯一的根节点

4、script

• 封装组件的JavaScript业务逻辑
• 与组件相关的data数据、methods方法等都需要定义到 export default{ } 所导出到对象中
• data 必须是一个函数，不能直接指向一个数据对象

5、style

• 组件内的

6、使用组件的三个步骤

• 使用 import 语法导入需要的组件
• 使用 components 节点注册组件
• 以标签形式使用刚才注册的组件

7、配置@路径提示

// 导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
// 配置@路径提示
"path-autocomplete.pathMappings": {
	"@": "${folder}/src"
},

8、组件的全局注册

• 在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件
• 第一个参数：组件的名称
• 第二个参数：要被全局注册的组件

import Count from '@/components/Count.vue'
Vue.component("MyCount", Count);

9、组件的props属性

• props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性
• 组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值
• data中的数据都是可读可写的

<MyCount init="9"></MyCount> //使用组件的地方进行初始化赋值
<script>
export default {
  props: ["init"],
  data() {
    return {
      count: this.init,
    };
  },
  methods: {
    add() {
      this.count++;
    },
  },
};
</script>

• props 的 default 默认值 、type值类型、required必填项

props: {
    init: {
      // 外界使用count组件时没有传递init属性，则该默认值生效
      default: 0,
      // 定义属性的值类型，如果传递过来的值不符合此类型，则会在终端报错
      type: Number,
      // 强调用户必须传递一个属性值
      required: true,
    },
}

10、组件中样式冲突的问题

• 所有组件中的DOM结构都是基于index.html页面进行呈现的（页面结构都会出现在index页面中），这样会造成组件之间的样式冲突
• 解决方法：
  • 为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性

<style lang="less" scoped>
  .countContainer {
    background-color: palevioletred;
    text-align: center;
  }
</style>