vue非父子传参

vue组件传参

父传子

代码如下（示例）：

父组件 (parent.vue)

<template>
	<div>
		<child :market="market"></child>
	</div>
</template>
<script>
import child from './child';
export default{
component:{
	child
},
data(){
	return{
		market:[{name:"开心一刻",hour24}，{name:"开心时刻",hout:12}}]
	}
}
}
</script>

子组件(child.vue)

<template>
	<div>
		<ul v-for="(item,index) in market">
			<li>超市名称：{{item.name}}，营业时长：{{item.hour}}</li>
		</ul>
	</div>
</template>
<script>
export default{
	props:{
		market:{
			type:Array,         //类型
			default:()=>[ ],   //默认值
			required:true,    //必填项，默认false
			validator(val){ } //自定义格式的验证，函数return成立                
		}
	}
}
</script>

子传父

代码如下（示例）：

父组件 (parent.vue)

<template>
	<div>
		<child v-on:titleChange="titleChange"></child>
		或者<child @titleChange="titleChange"></child>
	</div>
</template>
<script>
import child from './child';
export default{
component:{
	child
},
data(){
	return{
		title:'父组件本身的值'
	}
},
methods:{
		titleChange(e){
			this.title = e;
		}
	}
}
</script>

子组件(child.vue)

<template>
	<div>
		<button @click="changeTitle">{{title}}</button>
	</div>
</template>
<script>
export default{
data(){
	return {
		title:"子组件本身的值"
	}
},
methods:{
	changeTitle(){
		this.$emit('titleChange','子组件传给父组件的值')
	}
}
}
</script>

非父子传参

1、写一个src/components/bus.js 文件,让组件之间有个桥梁

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

2、父组件(parent.vue)

	import Bus from '@/components/bus'
	methods:{
		textData(id).then(res => {
        	Bus.$emit('sendChild', res.data)
       }) 
	}

3、子子组件(child.vue)

	import Bus from '@/components/bus'
	mounted() {
	    var that = this
	    Bus.$on('sendChild', function(val) {
	      console.log(val,'父组件传过来的数据')
	    })
  }

父组件调用子组件的方法

父组件（parent.vue）

	<button @click="handleClick">点击调用子组件方法</button>
	<child ref='child'></child>
		methods:{
			handleClick(){
				this.$refs.child.sing()
			}
		}

子组件（child.vue）

	<div>我是子组件</div>
	methods:{
		sing(){
			console.log('我是子组件的方法')
		}
	}

子组件调用父组件的方法

父组件（parent.vue）

	<child></child>
	methods:{
		fatherMethod(){
			console.log('我是父组件的方法')
		}
	}

子组件（child.vue）

	<div @click="clildMethod">点击调用父组件的方法</div>
	methods:{
		childMethod(){
			this.$parent.fatherMethod()
		}
	}

provide / inject的方法（适用于祖先向所有子孙注入值）

父组件（index.vue）第一种

	data(){
		return{
			dataList:['测试1','测试2','测试3']
		}
	}
	provide(){
		return{
			getData:this.dataList
		}
	}

子孙组件（textDialog.vue）

	inject:['getData'],
	created(){
		this.getData = ['测试4','测试5','测试6'] //此处修改的值 由于provide/inject绑定并不是响应式的
		                                       // 所以此处父组件的值还是初始值  但是如果传入可监听的对象
		                                       //那么对象的property还是可以响应的 可查看以下写法
		console.log(this.getData)//得到的是dataList数组 此时父组件的值并没有改变
	}

父组件（index.vue）第二种(子孙组件修改父组件值)

	data(){
		return{
			dataList:['测试1','测试2','测试3']
		}
	}
	provide(){
		return{
			getData:this
		}
	}

子孙组件（textDialog.vue）

	inject:['getData'],
	created(){
		this.getData.dataList = ['测试4','测试5','测试6'] 
		console.log(this.getData.dataList)//得到的是dataList数组 此时父组件的值也会变
	}