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

相关推荐
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
元气小嘉3 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
cccyi73 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆4 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js
拾光拾趣录5 小时前
虚拟DOM超详细流程
前端·vue.js·dom
拾光拾趣录5 小时前
Vue 项目监听页面 Hash 变化
前端·vue.js·vue-router
梨子同志5 小时前
Vue Options API vs Composition API
前端·vue.js
梨子同志6 小时前
Vue v-model 指令详解
前端·vue.js
天若有情6736 小时前
Node.js 是什么?npm 是什么? Vue 为什么需要他们?
vue.js·npm·node.js