vue 组件之间传值解析

1、父子组件传值

Ⅰ、父组件向子组件传值
①首先先定义一个子组件，小编命名为child，在child组件中组件props，props里的字段可以详细一些，也可以很简洁
例：

<template>
    <div>
        <div>{{message}}(子组件)</div>
    </div>
</template>
<script>
export default {
//详细定义
    props: {
		    {
		    	 message: String ,//字段类型
		    	 default:"",//默认值
		    	 require:false//是否必须
		    }
       }
//简洁定义
props:["message"]
}
</script>

②父组件中，引入子组件，并传入子组件内需要的值

<template>
    <div>
        <div>父组件</div>
        <child :message="parentMsg"></child>  
    </div>
</template>
 
<script>
 
import child from './child'  //引入child组件
export default {
    data() {
            return {
                parentMsg: 'a message from parent'  //在data中定义需要传入的值
            }
        },
        components: {
            child
        }
}
</script>

Ⅱ、子组件向父组件传值
① 先在子组件定义数据并在子组件中绑定方法

<template>
    <div>
        <div>{{message}}(子组件)</div>
        <input value="向父组件中传递消息" type="button" @click="sendMsg">
    </div>
</template>
<script>
export default {
//详细定义
    props: {
		    {
		    	 message: String ,//字段类型
		    	 default:"",//默认值
		    	 require:false//是否必须
		    }
       }，
data(){
            return{
                msg: '我是子组件里的值'
            }
        },
</script>

②在子组件中定义方法，通过emit

methods: {
            sendMsg(){
                this.$emit('func', this.msg)
            }
        }

③在父组件中定义方法

<template>
    <div>
   		 <div >父组件-----{{msgformson}}</div>
        <com1 v-bind:message="msg" @func="msgFormson"></com1>
    </div>
</template>
<script>
import com1 from "./child";
export default{
	data: {
          msg: '这是父组件中的值',
          msgformson: ''
      },
      methods: {
          msgFormson(data) {
              this.msgformson = data
              console.log(this.msgformson)
          }
      },
      components: {
          com1
      }
}
</script>

2、兄弟组件传值：使用eventBus实现兄弟组件传值
需求：
首先我的需求是这样的，页面上由top，left，main，bottom四个组件构成。需要将top中的值传到left中。

① 创建一个js文件，eventBus.js
② eventBus.js代码：

import Vue from 'vue'
export default new Vue()

③在top组件中，引入 eventBus.js,并且在top组件中定义一个函数，以及你想要提交的事件名，例如以下，小编定义了一个函数为一个changesize函数，当我触发这个函数的时候，小编提交了一个add事件，并将想传的值arg传出去

methods:{
    changesize(){
        eventBus.$emit('add',this.arg)
    }
}

④ 在left组件中也引入eventBus.js，然后在created生命周期函数中监听add事件，并打印出了传过来的值

created(){
    eventBus.$on('add',(message)=>{
        //一些操作，message就是从top组件传过来的值
        console.log(message)
    })
},

3、父组件向孙组件传递数据
①采用父子props层层传递
②使用bus和Vuex直接交互
③通过provide/inject传递

这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
在父组件只要声明了provide，在其子组件，孙组件，曾孙组件等能形成上下游关系的组件中交互，无论多深都能通过inject来访问provider中的数据。
实例：

//父组件
<template>
  <div>
    <p>{{ title }}</p>
    <son></son>
  </div>
</template>
<script>
  import Son from "./son"
  export default {
    name: 'Father',
    components: { Son },
    // provide选项提供变量
    provide: {
      message: 'provided by father'
    },
    data () {
      return {
        title: '父组件'
      }
    },
    methods: { ... }
  }
</script>

//子组件
<template>
  <div>
    <p>{{ title }}</p>
    <grand-son></grand-son>
  </div>
</template>
<script>
import grandSon from "./grandSon "
export default {
  name: "Son",
  components: { grandSon },
  data () {
    return {
      title: '子组件'
    }
  },
};
</script>

//孙组件
<template>
  <div>
    <p>message：{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "GrandSon",
  inject: [ "message" ],
  data () {
    return {
      title: '孙组件'
    }
  },
  methods: { ... }
};
</script>
//结果：孙组件显示
//message: provided by father


//选项说明
- provide 选项应该是一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。在该对象中，它支持ES6中Symbol作为key，但只在原生支持等环境下可工作。
- inject 注入变量： Array<string> | { [key: string]: string | Symbol | Object }
.inject 选项可以是字符串数组、对象（key为本地绑定名，value为在可用的注入内容中搜索用的key或一个对象，其 from 属性是在可用的注入内容中搜索用的key，default属性是降级情况下使用的value
）

//注：这对选项需要一起使用。provide和inject绑定并不是可响应的，这是刻意为之，然而如果你传入了一个可监听的对象，那么其对象的属性还是可监听的