Vue3中props和emits的使用总结

1,看代码

1.1,App.vue

<script setup>
import { ref,reactive } from 'vue'
import TodoItem from './TodoItem.vue'

const todos = ref([
  {
    id: 1,
    title: 'Do the dishes'
  },
  {
    id: 2,
    title: 'Take out the trash'
  },
  {
    id: 3,
    title: 'Mow the lawn'
  }
])
const item = reactive({
    id: 100,
    title: '你删不掉的,哈哈哈'
})
</script>

<template>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 0,item)"
    ></todo-item>
  </ul>
</template>

1.2,TodoItem.vue

<script setup>
// 父传子用Props
defineProps(['title'])
// 子调父定义的操作用Emits
defineEmits(['remove'])
</script>

<template>
  <li>
    {{ title }}
    <button @click="$emit('remove')">Remove</button>
  </li>
</template>

2,总结

2.1 props

在Vue3中,使用defineProps函数接受父组件传过来的props对象,

2.2 emits

在Vue3中,通过defineEmits函数使用父组件对当前行为的定义操作,可以使得具体实现不用在子组件中具体定义,完全交由父组件去定义即可,以此达到组件化开发解耦的目的

相关推荐

  1. Vue3propsemits使用总结

    2024-04-03 18:24:02       6 阅读
  2. Vue】$emitsprops

    2024-04-03 18:24:02       3 阅读
  3. Vue3props原理与使用

    2024-04-03 18:24:02       3 阅读

最近更新

  1. leetcode705-Design HashSet

    2024-04-03 18:24:02       5 阅读
  2. Unity发布webgl之后打开streamingAssets中的html文件

    2024-04-03 18:24:02       5 阅读
  3. vue3、vue2中nextTick源码解析

    2024-04-03 18:24:02       6 阅读
  4. 高级IO——React服务器简单实现

    2024-04-03 18:24:02       5 阅读
  5. 将图片数据转换为张量(Go并发处理)

    2024-04-03 18:24:02       4 阅读
  6. go第三方库go.uber.org介绍

    2024-04-03 18:24:02       6 阅读
  7. 前后端AES对称加密 前端TS 后端Go

    2024-04-03 18:24:02       7 阅读

热门阅读

  1. IO和NIO的主要区别在哪里?

    2024-04-03 18:24:02       5 阅读
  2. CSS 滚动条样式修改

    2024-04-03 18:24:02       5 阅读
  3. codeforces round 936 div2(a,b,c)

    2024-04-03 18:24:02       6 阅读
  4. Python程序设计 魔法函数

    2024-04-03 18:24:02       5 阅读
  5. ACI Fabric

    2024-04-03 18:24:02       5 阅读
  6. wencoo个人的博客目录索引-更新

    2024-04-03 18:24:02       4 阅读
  7. Oracle extent、segment、datafile、tablespace及存储关系

    2024-04-03 18:24:02       4 阅读
  8. Oracle密码文件

    2024-04-03 18:24:02       4 阅读
  9. SpringMVC 中实现自定义转换

    2024-04-03 18:24:02       5 阅读
  10. 开源的分布式文件系统 Fastdfs 安装入门介绍

    2024-04-03 18:24:02       4 阅读
  11. 在stable diffusion中如何分辨lora、大模型、controlnet

    2024-04-03 18:24:02       5 阅读
  12. 第1章 开始

    2024-04-03 18:24:02       3 阅读