这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战。
今天是我学习vue的第一天，学习了组件化开发和插槽的使用：首先是组件化开发；在了解这个知识点之前，要知道vue的基本概念，vue是一个渐进式开发的框架，需要用到具体的模板再进行加载；那么组件化开发，是一个抽象的概念，把一个个独立的，小型的组件定义好，在需要用的地方调用，从而形成一个大的组件。
首先组件化的定义：要有template：在这个里面，一定要有一个大的div有且只有一个最外层的div包裹着，在这里写渲染层，注意，这里定义的数据在页面上不会显示。如果要是想要在页面上显示出来，可以运用插槽。（待会会说），那么组件化开发最重要的是父子组件的传值：就简单理解在一个组件里输入值和输出值。父传子===在子组件里输入一个值，用到的属性叫做props：["定义的属性"]，写法：子组件 props:["name"],显示：{{name}}父组件 <div name="传值"></div >此时父组件的：“传值”就会传入到子组件中了；由于vue的数据传输是单向的，当我想要子组件往父组件传值的时候要怎么办呢？===在子组件里向外输出值output,这里就需要用到一个属性 emit("click",false) 父组件 <div @click="handleclick"><div> 这时候父组件就能获取到false的这个属性了。ps：一般来说 v3的写法 使用到model 在子组件中 model:{props:"传入的值",event:"传出的事件"} this.$emit("传出的事件",event) 父组件中：<base-checkbox v-model="lovingVue"></base-checkbox> 这里的 lovingVue 的值将会传入这个名为 传入事件 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。
插槽，简单而言，就是在子组件中找一个空间，用来存放外来的数据。从而在页面中渲染出来 <slot></slot>，如果在子组件中有多个地方需要用到slot，那么可以用name来区分 <slot name="first" :data="data"></slot>，父组件中<template v-slot="first">可以显示在子组件插槽里的内容</tempalte> ，ps：#可以代替name 例如 <slot #first>
