Vue组件 | 青训营

peaky
105 阅读3分钟

一、script标签内常见选项

  1. setup()
    • 执行时间：组件创建之前
    • 接收参数（可用可不用）
      • props：一个响应式对象
      • context：一个组件上下文对象
        • 属性
          • attrs：一个对象，包含父组件传递给子组件但未在子组件props声明的属性
          • slots：一个访问插槽的函数
          • emit：一个用于触发父组件的函数
    • 书写位置：
      • 第一种：传统script标签内
        • 要手动导出组件的选项、数据、方法和生命周期钩子函数等内容：
          • export default {...}
      • 第二种：在script标签上添加setup属性
        • 不用手动导出
          • 原因：组件的逻辑代码已内联到模板，选项、数据、方法等等都已自动定义到组件里
        • 不用定义name
          • 会通过文件名自动推导：helloI.vue/HelloI.vue/hello-i.vue->HelloI
  2. components：注册并引入其他组件
  3. props
    • 做什么
      • 声明组件所接收到的属性
    • 可定义的属性
      • 类型type
      • 默认值default

二、构建Vue组件

  1. 创建一个vue文件，作为一个vue组件 image.png
  2. 要想在父组件中使用 image.png
  3. 效果 image.png

三、组件间通信

  1. 父子间：
    • 父组件向子组件传递数据（单向传递，子组件不能直接修改父组件传递的数据）
      • 父组件定义数据
        • ref()：不能传入对象
        • reactive()
      • 父组件向子组件传递数据
        • 子组件上添加v-bind:数据名="数据名"
      • 子组件定义props接收父组件传递的参数
        • props:[参数1，参数2...]/props:{}
          • 每个接收的参数可写为对象形式，便于接收多个参数
            • 参数：type、required、default
    • 子组件通知父组件更新数据
      • 父组件定义更新方法
        • 父组件使用v-on指令：@监听事件的名称="触发的事件方法"
          • 监听事件命名：全小写加'-'（类似：my-account）
          • 触发的事件方法命名：小驼峰（类似：myItem）
        • 在方法里书写逻辑代码
      • 子组件定义更新方法
        • 子组件使用v-on指令监听：
          • 第一种：
            • @事件动作="由动作触发的事件其名称"
              • 事件命名：小驼峰
              • 声明子组件可触发的父组件监听事件并编写触发监听事件的逻辑代码
                • 第一种：（不显式使用setup时）
                  • emit=defineEmits('父组件里监听的事件名称(大驼峰)')
                    • defineEmits()宏不允许在setup(){}使用
                  • 编写触发逻辑：
                    • function 事件名称(){emit('父组件里监听的事件名称(大驼峰)',传递的参数)}
                      • 必须传入监听事件名，参数可传可不传
                • 第二种：（显式使用setup函数时）
                  • emits:[可触发的监听对象名]
                  • 编写触发逻辑：setup(props,ctx){const 事件名称=()=>{ctx.emit(可触发的监听对象名)}}
          • 第二种：
            • @事件动作="$emit('监听事件名称',传递的参数(可不传))"
  2. 祖孙间：provide、inject
  3. 全局组件通信：
    • 使用Pinia
      • 关于Pinia
        • 是什么：一个拥有组合式API的Vue状态管理库
      • 使用
        • 安装：npm install pinia/yarn add pinia
        • 创建一个pinia实例（根store）并将其传递给应用
          • import {createPinia} from 'pinia'
          • const pinia=createPinia()
          • 应用实例名.use(pinia)
        • 创建状态模块：state+actions+getters
        • 在组件里使用状态模块
      • 关于Store
        • 是什么：一个保存状态和业务逻辑的实体
        • 有什么
          • 整个应用中可访问的数据
        • 特点
          • 能被每个组件都可读取和写入
avatar
文章
阅读
粉丝