vue中组件传值方法

父组件给子组件传值

一、
? ? ? 1.在子组件标签中写入父组件传递数据 向下传递prop
? ? ? 2.在子组件内声明props选项接收父组件传递的数据 props:['','','']

父组件：

<Header :msg='msg' ></Header>

子组件：

props:['msg'],

二、
? ? ? provide inject
? ? ? 1.父组件使用provide提供传递数据或者方法
? ? ? 2.子组件使用inject注入传递的数据或者方法

父组件：

provide(){
    return {
      parent:this.parent,
      parentSend:this.parentSend,
      attr:this.attr
    }
  }

子组件：

inject:['parent','parentSend'],

三、
? ? ? 事件总线 $emit 和 $on vue实例调用方法?
? ? ? 1.新建event.js?
? ? ? ? import Vue from 'vue';
? ? ? ? export default new Vue();
? ? ? 2.在父组件中使用$emit发射自定义事件同时传递参数
? ? ? import Bus from './event.js'
? ? ? Bus.$emit('自定义事件名称',传递数据)
? ? ? 3.在子组件内部使用$on监听自定义事件同时接收参数
? ? ? Bus.$on('自定义事件名称',(a,b)=>{

? ? ? })

父组件：

import Bus from './event'


Bus.$emit('toHeader',this.pMsg,'hello world')

子组件：

import Bus from '../event'

Bus.$on('toHeader',(a,b)=>{
      console.log(a,b);
      this.a = a;
      this.b = b;
    })

子组件给父组件传值

1.发射自定义事件给父组件同时传递数据
? ? ? this.$emit('toParent',this.footer);
? ? ? 2.在父组件模板中(在子组件标签上)声明自定义事件?
? ? ? <Footer @toParent='事件处理程序'></Footer>
? ? ? 事件处理程序(接收子组件传递的数据){

? ? ? }

兄弟组件传值

利用事件总线?
? ? 1.定义事件总线 新建xxx.js
? ? ? ? import Vue from 'vue';
? ? ? ? export default new Vue();
? ? 2.在一个兄弟组件中引入事件总线?
? ? ? import Bus from './event.js'
? ? ? 使用Bus.$emit('自定义事件名称',传递的数据)
? ? 3.在另一个兄弟组件中引入事件总线
? ? ? import Bus from './event.js'
? ? ? 使用Bus.$on('emit发射自定义事件名称',(a,b)=>{
? ? ? ??
? ? ? })监听发射自定义事件 同时接收数据
? ??

祖先后代组件传值/通信

provide inject