父组件把方法传递给子组件视频:https://www.bilibili.com/video/BV1uW411m745?from=search&seid=3072872826005397160
Vue的组件作用域都是孤立的,也就是说子组件内不能直接引用父组件的数据。需要通过特定的方法才能完成各个组件之间的通信
一、父组件向子组件传递数据
1.在 Vue 中,可以使用 props 向子组件传递数据。
父组件在调用子组件的地方,添加一个自定义的属性,属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量,或者是boolean,或者是number类型,需要使用绑定属性
在子组件定义的地方,添加一个选项 props,方式一 props的值为数组,元素为自定义的属性名
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
二、子组件向父组件传递数据
子组件主要通过事件传递数据给父组件(自定义事件)
1、子组件
2、父组件
三、子组件向子组件传递数据(即非父子之间的传递)
Vue 没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件。如果一定需要子对子传参,可以先从传到父组件,再传到子组件。为了便于开发,Vue 推出了一个状态管理组件,可以很方便实现组件之间的参数传递
1.引入PubSubJS消息订阅与发布
发布消息者通过绑定事件 通过methods中定义方法:通过pubsub.publish('消息名',指定的数据);订阅消息者通过mounted中订阅消息pubsub.subscribe('消息名', 回调函数(两个参数:事件名和接收的数据)=>{ } )
创建一个公共的bus,然后导出一个bus
bus.js
import Vue from 'vue' ;
export const bus =new Vue();
然后A B两个组件同时引入bus.js
import { bus } from '@/components/bus.js';
A组件$emit事件及要传的值
getBrother () { bus.$emit('testEvent','我是要传的值') }
B组件接收
bus.$on('testEvent',val => { console.log(val);this.val = val; } )