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

相关推荐
给月亮点灯|7 小时前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He7 小时前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头7 小时前
v-model与.aync的区别
前端·javascript·vue.js
xvmingjiang8 小时前
Vue 3 中监听多个数据变化的几种方法
前端·javascript·vue.js
m0_616188499 小时前
el-table的隔行变色不影响row-class-name的背景色
前端·javascript·vue.js
zheshiyangyang9 小时前
Vue3组件数据双向绑定
前端·javascript·vue.js
Monly2110 小时前
Vue:下拉框多选影响行高
前端·javascript·vue.js
武昌库里写JAVA11 小时前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
我是日安12 小时前
从零到一打造 Vue3 响应式系统 Day 6 - 响应式核心:链表实装应用
前端·vue.js
艾小码12 小时前
Vue模板进阶:这些隐藏技巧让你的开发效率翻倍!
前端·javascript·vue.js