Vue 子组件给父组件传值

weixin_43687835

已于 2022-05-17 13:33:47 修改

阅读量1.8k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-05-16 16:21:21 首次发布

本文链接：https://blog.csdn.net/weixin_43687835/article/details/124802212

版权

本文介绍了Vue中子组件向父组件传递值的三种方式：原始prop方法、自定义事件（emit）和全局事件总线。针对每种方法的优缺点进行了说明，其中全局事件总线在Vue3中已被移除。Vue3推荐使用Composition API进行通信。

摘要由CSDN通过智能技术生成

除了全局状态管理（Vuex）、浏览器本地存储外，目前了解到了以下几种子组件给父组件传值的方法

方法1，原始用法

父组件定义一个方法，接收参数，作为 prop 传给子组件，然后子组件调用该方法传值

// 父组件
<MyHeader :addTodo="addTodo"/>

methods: {
   
  addTodo(todoObj){
   
    this.todos.unshift(todoObj)
  },
}

// 子组件
props: [addTodo]

methods: {
   
	a(){

最低0.47元/天解锁文章

weixin_43687835

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Vue 子组件给父组件传值

除了全局状态管理（Vuex）、浏览器本地存储外，目前了解到了以下几种子组件给父组件传值的方法方法1，原始用法父组件定义一个方法，接收参数，作为 prop 传给子组件，然后子组件调用该方法传值// 父组件<MyHeader :addTodo="addTodo"/>methods: { addTodo(todoObj){ this.todos.unshift(todoObj) },}// 子组件props: [addTodo]methods: { a(
复制链接

扫一扫

专栏目录