Vue3:【props、emit 和 components】 在 setup 语法糖和非语法糖中的使用

目录

  • [1 props](#1 props)
    • [1.1 setup 语法糖](#1.1 setup 语法糖)
    • [1.2 非语法糖](#1.2 非语法糖)
  • [2 emit](#2 emit)
    • [2.1 setup 语法糖](#2.1 setup 语法糖)
    • [2.2 非语法糖](#2.2 非语法糖)
  • [3 components 组件](#3 components 组件)
    • [3.1 语法糖](#3.1 语法糖)
    • [3.2 非语法糖](#3.2 非语法糖)

1 props

1.1 setup 语法糖

ts 复制代码
<script lang="ts" setup>

interface PersionItem {
  id: number
  value: number
  imageSrc: string
  label: string
}
const props = defineProps({
  personData: {
    type: Array as () => PersionItem[],
    default: () => []
  }
})

console.log(props.personData)

1.2 非语法糖

typescript 复制代码
<script lang="ts">

interface Option {
  imageSrc: String
  fileName: String
  modifierInfo: String
  path: String
  origin: String
}
export default {
  props: {
    listData: {
      type: Array as () => Option[],
      default: () => []
    }
  },
  setup(props, { emit }) {
    console.log(props.listData)
    return {}
  }
}
</script>

2 emit

2.1 setup 语法糖

typescript 复制代码
<script lang="ts" setup>
import { defineEmits } from 'vue'
// 定义
const emit = defineEmits(['checkPerson'])

const check = () => {
  emit('checkPerson', personID.value)
}
</script>

2.2 非语法糖

typescript 复制代码
<script lang="ts">
export default {
  emits: ['focusEvent', 'blurEvent'],
  setup(props, { emit }) {
    // const emit = defineEmits(['debouncedInput', 'focusEvent', 'blurEvent'])
    // 获得焦点事件
    const focusFn = () => {
      emit('focusEvent')
    }
    // 失去焦点事件
    const blurFn = () => {
      emit('blurEvent')
    }

    return {  focusFn, blurFn }
  }
}
</script>

3 components 组件

3.1 语法糖

引入后直接用

3.2 非语法糖

typescript 复制代码
<script lang="ts">
import fileNameItem from './fileNameItem.vue'

export default {
  // 局部注册组件
  components: {
    fileNameItem
  },
  setup(props, { emit }) {
    return {}
  }
}
</script>
相关推荐
abigale038 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者28 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile31 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399734 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊39 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火39 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码