Vue 子组件给父组件传值

Vue 子组件给父组件传值,第1张

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

方法1,原始用法 父组件定义一个方法,接收参数,作为 prop 传给子组件,然后子组件调用该方法传值
// 父组件
<MyHeader :addTodo="addTodo"/>

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

// 子组件
props: [addTodo]

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

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

props 适用于:

父组件 ==> 子组件 通信子组件 ==> 父组件 通信(要求父组件先给子组件一个函数) 方法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 移除了。

消息订阅与发布(基本不用)

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1298877.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存