Vue3 中 props 与 emit 用法

在 Vue3 中,propsemit 的用法有所改变,主要的变化在于它们现在都通过 setup 函数来访问和使用。

props:
props 用于父组件向子组件传递数据。在 setup 函数中,props 是一个参数,我们可以通过它访问到父组件传入的所有 prop 值。

javascript 复制代码
<script>
export default {
  props: ['message'],
  setup(props) {
    console.log(props.message) // 输出父组件传入的 message
  }
}
</script>

emit:
emit 用于子组件向父组件发送自定义事件。在 setup 函数中,emit 是第二个参数,我们可以使用它来触发自定义事件并传递数据。

javascript 复制代码
<script>
export default {
  setup(props, { emit }) {
    const onClick = () => {
      emit('click', 'Hello, parent')
    }
    return { onClick }
  }
}
</script>

在这个示例中,当点击事件触发时,子组件会通过 emit 发送一个名为 'click' 的事件,并传递一个 'Hello, parent' 的数据给父组件。父组件可以通过 v-on:click="handler"@click="handler" 来监听这个事件。

以上是 Vue3 中 propsemit 的基本用法,更多的功能和详情,你可以查阅 Vue 官方文档Vue 官方文档 进行学习。

相关推荐
Gavin_91531 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子7 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享8 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果8 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄9 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰9 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半11 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
MarcoPage11 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
工业互联网专业12 小时前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计