vue 组件化

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 样式将所有的子样式包裹
• 父组件给子组件传值
  1. 子组件里直接属性名=”值”直接传字符串
  2. 通过绑定值的方式:data="msg"来传变量
  3. 子组件里用 props 来接收参数
  4. props 里面的内容可以跟 data 里面的值一样直接插入，但是一般不建议把所有的内容都放到 props 里面，只有传过来的值才放进去
  5. props 里面可以是数组或者对象
  6. 如果是对象还可以进行重命名，并加一些限制
  7. 对象中的属性还是一个对象
  • 可以定义传过来的类型 type，如 String、Array、Object
  • type 后面跟的参数不加引号
  • 如果一个组件里调用多次子组件，需要把需要的参数都传过来，如果不传就会出问题，解决这个问题可以使用 default 来给对应属性加一个缺省值，这样如果传参则使用传过来的参数，不传就默认使用缺省值
• 子组件给父组件传值
  • 首先子组件需要传值的标签需要绑定一个事件，事件触发一个函数，函数可以传值
  • 函数中使用this.$emit()来给父组件传值，里面有两个参数，第一个是声明的自定义事件名称，这个可以是任意名称，第二个参数是需要传的值
  • 父组件中接收值的标签需要使用子组件自定义的事件，事件触发一个函数，函数内可以接收子组件传过来的参数
  • 子组件中可以调用，但是无法改变父组件传过来的值（this.btn这种形式），可以定义一个变量，将值赋给该变量，去改变该变量的值
  • 父组件可以改变子组件传过来的参数的值

子组件与父组件之间互相通信

1. 如子组件访问父组件的方法this.$parent.myFun(),标签跟函数内都可访问,多级访问可以使用多次$parent,如孙组件访问就是this.$parent.$parent.myFun()
2. 如果能确认访问的组件方法是根节点的，还可以直接使用$root来访问，即this.$root.myFun() 3.父组件访问子组件的方法，首先需要给子组件使用ref=''来给子组件起个别名
3. 然后使用this.$refs.aaa.btn()aaa 是子组件起的别名，btn()是子组件中的方法,来进行访问
4. 需要着重注意一点在初始加载的时候，子组件的这些方法是还没有被渲染的，无法访问，可以通过事件或者其他异步操作使其渲染后再访问

插槽

• 插槽使用 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>
• 父组件拿取子组件插槽的数据
  1. 子组件将要传过来的数据绑定一个名称，如子组件 data 里有个 user 对象，声明的时候在 slot 里加一个<slot name="one" :info="user"></slot>，就能把变量传给父组件
  2. 父组件中在 v-slot:one 后面加一个=”XXX”就能获取到，如：<card><template v-slot:one="msg" >{{msg.info.name}}</template></card>

生命周期

• 生命周期的方法直接写在最外层
• 十个方法
  1. 创建组件前执行 beforeCreate(){}
  2. 创建完组件执行 Created(){}
  3. 模板编译之前（挂载 dom 之前）执行 beforeMount(){}
  4. 模板编译之后（挂载 dom 之后）执行 mounted(){}
  5. 数据更新之前 beforeUpdate(){}
  6. 数据更新完成之后 Updated(){}
  7. 组件缓存激活时调用 activated(){}
  8. 组件缓存停用时调用 deactivated(){}
  9. 组件销毁之前 beforeUnmount(){}
  10. 组件销毁之后 unmounted(){}
• v-if 与 v-show 的区别：v-if 是销毁，v-show 是隐藏,v-if 调用的是组件是否销毁，v-show 调用的是数据是否更新
• 如果不想让一个组件销毁，可以在外面嵌套一层 keep-alive 给该组件加缓存
• ElementPlus 组件库