除了全局状态管理(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 移除了。
与全局消息总线一个原理,需借助第三方库
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)