Vue 子组件给父组件传值

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

方法1，原始用法

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

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

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

// 子组件
props: [addTodo]

methods: { 
   
	a(){ 
   
		this.addTodo(value)  // 调用父组件的函数，并传递值
	}
}

缺陷：需要层层传递，元素与孙子元素传值不方便。

props 适用于：

1. 父组件 ==> 子组件 通信
2. 子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）

方法2，自定义事件(emit)

// 父组件
<MyHeader @addTodo="addTodo"/>  // 父组件给子组件绑定事件回调函数

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

// 子组件

methods: { 
   
	a(){ 
   
		this.$emit('addTodo', value)  // 子组件触发自定义事件并传递值。
	}
}

方法3，全局事件总线

// main.js
new Vue({ 
   
  el:'#app',
  render: h => h(App),
  beforeCreate() { 
   
    Vue.prototype.$bus = this  // 注册全局事件总线
  },
})

// 接受方组件

methods: { 
   
  addTodo(todoObj){ 
   
    this.todos.unshift(todoObj)
  },
},
mounted(){ 
   
	this.$bus.$on('eventName', addTodo) // 绑定事件回调，接受数据
},
beforeDestroy(){ 
   
	this.$bus.$off('eventName')
}

// 发送方组件

methods: { 
   
  sendTodo(todoObj){ 
   
    this.$bus.emit('eventName', todoObj)   // 触发事件，并传递数据
  },
},

补充：发现 Vue3 中好像没办法用全局事件总线了，直接把 $on, $once, $off 这几个 API 移除了。

消息订阅与发布（基本不用）

与全局消息总线一个原理，需借助第三方库

今天的文章Vue 子组件给父组件传值分享到此就结束了，感谢您的阅读。