vue 组件化
子组件与父组件互相传值
以下App.vue代表根组件index.html代表主入口文件
- 默认建在 components 文件夹内
- 文件名首字母大写
- APP.vue 是最上层的组件 而不是 index.html
- 如果需要导入的组件是匿名导出的，就在 App.vue 中使用
import MyBtn from './components/MyBtn'导入 - 这里需要注意导入的时候没有 vue 后缀
- 然后加到 components 中
- 在上层组件使用时，使用
<MyBtn></MyBtn>或<my-btn></my-btn>两种形式都可以使用，但是一般是使用第二种形式 - style 中加入 scoped 意味着该 vue 中的样式只能在本文件中使用，但是一般加 scoped 会受到限制，不加的话冲突性又太强，因此这里可以加一个
lang='scss'，在最外层的 div 加一个类，然后利用 scss 的特性用一个大的 class 样式将所有的子样式包裹 - 父组件给子组件传值
- 子组件里直接属性名=”值”直接传字符串
- 通过绑定值的方式
:data="msg"来传变量 - 子组件里用 props 来接收参数
- props 里面的内容可以跟 data 里面的值一样直接插入，但是一般不建议把所有的内容都放到 props 里面，只有传过来的值才放进去
- props 里面可以是数组或者对象
- 如果是对象还可以进行重命名，并加一些限制
- 对象中的属性还是一个对象
- 可以定义传过来的类型 type，如 String、Array、Object
- type 后面跟的参数不加引号
- 如果一个组件里调用多次子组件，需要把需要的参数都传过来，如果不传就会出问题，解决这个问题可以使用 default 来给对应属性加一个缺省值，这样如果传参则使用传过来的参数，不传就默认使用缺省值
- 子组件给父组件传值
- 首先子组件需要传值的标签需要绑定一个事件，事件触发一个函数，函数可以传值
- 函数中使用
this.$emit()来给父组件传值，里面有两个参数，第一个是声明的自定义事件名称，这个可以是任意名称，第二个参数是需要传的值 - 父组件中接收值的标签需要使用子组件自定义的事件，事件触发一个函数，函数内可以接收子组件传过来的参数
- 子组件中可以调用，但是无法改变父组件传过来的值（
this.btn这种形式），可以定义一个变量，将值赋给该变量，去改变该变量的值 - 父组件可以改变子组件传过来的参数的值
子组件与父组件之间互相通信
- 如子组件访问父组件的方法
this.$parent.myFun(),标签跟函数内都可访问,多级访问可以使用多次$parent,如孙组件访问就是this.$parent.$parent.myFun() - 如果能确认访问的组件方法是根节点的，还可以直接使用$root来访问，即
this.$root.myFun()3.父组件访问子组件的方法，首先需要给子组件使用ref=''来给子组件起个别名 - 然后使用
this.$refs.aaa.btn()aaa 是子组件起的别名，btn()是子组件中的方法,来进行访问 - 需要着重注意一点在初始加载的时候，子组件的这些方法是还没有被渲染的，无法访问，可以通过事件或者其他异步操作使其渲染后再访问
插槽
- 插槽使用 slot 标签进行绑定
- 插槽也区分默认插槽（缺省插槽）跟具名插槽
- 具名插槽就是 slot 标签加一个 name 属性，缺省插槽则不加，缺省插槽有且只能有一个
- 插槽标签 slot 内，可以填入默认值，这样当传值时则使用传过来的值，不传值时使用默认值
- 父组件使用插槽，使用子组件标签内加 template 来使用，如果是缺省的，则内容直接加在
<template v-slot:default></template>里面，比如子组件叫 card，缺省的插入就是<card><template v-slot:default>msg</template></card>,msg 代表插入的内容 - 如果是具名插槽，如果 name 设置的值为 one，则使用
<card><template v-slot:one>msg</template></card>来插入 <template v-slot:one>有个语法糖是<template #one>- 父组件拿取子组件插槽的数据
- 子组件将要传过来的数据绑定一个名称，如子组件 data 里有个 user 对象，声明的时候在 slot 里加一个
<slot name="one" :info="user"></slot>，就能把变量传给父组件 - 父组件中在 v-slot:one 后面加一个=”XXX”就能获取到，如：
<card><template v-slot:one="msg" >{{msg.info.name}}</template></card>
- 子组件将要传过来的数据绑定一个名称，如子组件 data 里有个 user 对象，声明的时候在 slot 里加一个
生命周期
- 生命周期的方法直接写在最外层
- 十个方法
- 创建组件前执行 beforeCreate(){}
- 创建完组件执行 Created(){}
- 模板编译之前（挂载 dom 之前）执行 beforeMount(){}
- 模板编译之后（挂载 dom 之后）执行 mounted(){}
- 数据更新之前 beforeUpdate(){}
- 数据更新完成之后 Updated(){}
- 组件缓存激活时调用 activated(){}
- 组件缓存停用时调用 deactivated(){}
- 组件销毁之前 beforeUnmount(){}
- 组件销毁之后 unmounted(){}
- v-if 与 v-show 的区别：v-if 是销毁，v-show 是隐藏,v-if 调用的是组件是否销毁，v-show 调用的是数据是否更新
- 如果不想让一个组件销毁，可以在外面嵌套一层 keep-alive 给该组件加缓存
- ElementPlus 组件库