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 官方文档 进行学习。

相关推荐
cypking5 分钟前
解决 axios get请求瞎转义问题
vue.js
向阳25613 分钟前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特19 分钟前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~23 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
莫循瑾木40 分钟前
Vue3 Composition API 完全指南
前端·vue.js·前端工程化
初辰ge43 分钟前
后端说“基本增删改查都写好了,就差切图仔对接口了!”——我一怒之下撸了个代码生成器
前端·vue.js
清风絮柳1 小时前
52.个人健康管理系统小程序(基于springboot&vue)
vue.js·spring boot·毕业设计·前后端分离·健康管理系统·个人健康管理系统·个人健康管理小程序
6武72 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
goto_w2 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
samuel9183 小时前
axios取消重复请求
前端·javascript·vue.js