vue中父子组件传值，非父子组件传值方法

父组件向子组件传值

父组件代码：

<template>
	<div class="father">
	    <!-- 引入子组件 -->
	    <Child :extendsFather="messgae"></Child>
	</div>
</template>
<script>
    //导入子组件文件位置
    import Child from '/child' 
    export default{
        //添加子组件
        components: {
           Child
        },
        data(){
           return{
               message: '我是父亲'
           }
        }
    }
</script>

子组件代码：

<template>
	<div class="son">
	    <span @click="change">子组件--{{ extendsFather}}</span>
	</div>
</template>
<script>
	export default{
		props: {
		//将父组件传递的extendsFather在props中定义一下，子组件才可以使用
		//子组件中的props中的数据都是通过父组件传递过来的，只可以读，不可以重新赋值
		   extendsFather: {
		       type: String
		   }
		},
		methods: {
		    change(){
		        this.extendsFather = '我是儿子';
		        //利用绑定事件机制@click更改extendsFather的值
		    }
		}
	}
</script>

父组件向子组件传递方法，子组件向父组件传值

父组件：

<template>
	<!--父组件使用v-on绑定事件机制,自定义一个事件属性向子组件传递方法-->
	<!--引入子组件-->
	<Child v-on:father="fatherValue"><Child>
</template>
<script>
	import Child from './child'
	export default{
	    components: {
	        Child 
	    },
		data(){
			return{
			    name: ''
			}
		},
		methods: {
		   fatherValue(data){
		       var _that = this;
		       _that.name = data;
		   }
		}
	}
</script>

子组件：

<template>
    <button @click="childValue">子组件向父组件传值</button>
</template>
<script>
	export default{
		data(){
			return {
			   name: '我是儿子'
			}
	    },
	    methods: {
	        childValue(){
	            var _that = this;
	            //点击子组件的childValue方法，拿到父组件传递来的father方法，并向父组件传值
	            //emit意思是触发、调用、发射的意思
	            //使用$emit调用父组件的father方法，并将子组件data中的name值传入父组件中
	            _that.$emit('father', _that.name);
	        }
	    }
    }
</script>

父组件调用子组件的方法，父组件获取子组件的值

父组件调用子组件的方法同过this.$ref.refName来调用子组件中的方法

子组件：

<template>
    <span></span>
</template>
<script>
	export default{
	     data(){
	         return {
	             number: 2
	         }
	     },
		 methods: {
		     //在子组件中定义一个childClick方法
		     childClick(data){
		        alert(data);
		        this.$emit('change');
		     }
		 }
    }
</script>

父组件：

<template>
    //绑定一个fatherClick方法，点击调用的时候，可以弹出
    <button @click="fatherClick">调用</button>
    <!--引入子组件-->
    <Child ref="fatherValue" @change="handleChange"></Child>
    <div>{{total}}</div>
</template>
<script>
	import Child from './child'
	export default{
		components: {
			Child
		},
		data(){
			return{
		     	//父组件data中的数据
			    message: '父组件调用子组件的方法',
			    total: 0
			}
		},
		methods: {
		    fatherClick(){
		        var _that = this;
		        //利用_that.$refs.refName调用子组件的childClick方法，并将data数据传递过去
		        _that.$refs.fatherValue.childClick(_that.message);
		    },
		    handleChange(){
		        var _that = this;
		        _that.total = _that.$refs.fatherValue.number;
		    }
		}
	}
</script>

非父子组件传值方法

非父子组件传值需要借助一个中间vue实例的js和一个可以调用两者的父组件

bus.js

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

子组件1

<template>
    <button @click="childAclick">传值</button>
</template>
<script>
    import Bus from './bus.js'
	export default{
		data(){
			return{
			    childAValue:'我是大儿子'
			}
		},
		methods: {
		    childAclick(){
		        var _that = this;
		        //在子组件1中使用emit发射一个自定义的transmit事件，将data中childAValue值传递到子组件2中
		        //Car相当于一个中间仓库，用来储存要传输的数据，再将数据传输出去
		        Bus.$emit('transmit', _that.childAValue);
		    }
		}
	}
</script>

子组件2

<template>
    <span>{{ childBValue}}</span>
</template>
<script>
import Car from './car.js'
	export default{
		data(){
			return{
			    childBValue:'我是小儿子'
			}
		},
		mounted(){
		    var _that = this;
		    //$on是用来接收子组件1传输来的数据的
		    Bus.$on('transmit',(data) => {
		        _that.childBValue = data;
		    });
 		}
	}
</script>

父组件

<template>
	<div>
	    <ChildA/>
	    <ChildB/>
	</div>
</template>
<script>
	import ChildA from './childA'
	import ChildB from './childB'
	export default{
		components:{
			ChildA,
			ChildB 
		}
	}
</script>

添加父组件的原因是：子组件1和子组件2两者没有关系，要实现两者之间传值，需要有子组件1跳转到子组件2，这样就会使子组件2重新刷新页面，导致无法传值，利用父组件，将两个子组件同事显示在一个页面，这样就可以使两个非父组件之间进行传值了。