Vue中组件之间传值的三种常用方法

在使用vue的过程中免不了要组件之间传值，那么这里就说一说传值的几种方法和怎么使用
先来看一张图
引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

一.父组件向子组件传值
来，先上代码
父组件:

<template>
  <div>
    父组件:
    <input type="text" v-model="name">		//v-model绑定
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
	  import child from './child'		//引入
	  export default {
	    components: {
	      child									
	    },
	    data () {
	      return {
	        name: ''
	      }
	    }
	  }
</script>

子组件：

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

二.子组件向父组件传值

在子组件中创建一个按钮，并绑定一个点击事件

<template>
	<div>
		<li v-for="(item,index) in arr" >
			<p>{{item}}</p>
			<button @click="chuanzhi(index)">删除</button>
		</li>	
	</div>
</template>

在js的methods中定义这个事件函数中使用$emit来触发一个事件并传递一个参数。

chuanzhi(index){
	this.$emit("jieshou",index)
}

在父组件中v-on监听这个事件（jieshou）并添加一个响应事件的方法

<template>
  <div class="hello">
	<router-link to="/6">426636</router-link>
    	<h1>{{ msg }}</h1>
   	<input type="text" v-model="txt">
	<button @click="dianji">留言</button>
	<Show v-bind:arr="arr" v-on:jieshou="xuanran"></Show>
  </div>
</template>

js中

xuanran(data){
	console.log(data)
	this.arr.splice(data,1)	
}

三.同级组件之间的传值(创建一个公共js文件)
这里我们先说一下如何创建一个公共文件去传值，下一篇会说到如何使用Vuex状态管理器来建立一个仓库进行组件之间的传值。

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。
1、在工程src目录下新建一个Pub.js文件
Pub.js
	import Vue from "vue"
	export default new Vue()
2、在各组件中引入Pub.js文件
	import Pub from "../Pub.js"
3、在A组件中通过$emit调用自定义函数并且传参
	Pub.$emit('namefn',"str1","str2"，……)
4、在B组件中通过$on响应事件并接受参数
	Pub.$on('namefn',(str1,str2,……) =>{
		console.log(str1+"就是A组件中定义的数据")
	})

示例代码：
公共bus.js

//bus.js
import Vue from 'vue'		//移入Vue
export default new Vue()		//暴露给Vue这个全局对象

组件A中

<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>

组件B中：

<template>
  <div>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件来接收参数
      Bus.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
</script>