组件之间传值（父子组件、非父子组件）

组件之间传值（父子组件、非父子组件）

一、父子组件之间传值

1.父向子传值

（1）.父组件

父组件里需引用子组件，并传值给子组件，代码如下：

<template>
	<div>
		<span>哈哈哈哈</span>
		<span style="display: block;">{{ title}}</span>
	
	   <son v-bind:msg="msg"></son>     -------------利用v-bind传值给子组件
	</div>
</template>

<script>
	import son from '@/views/son.vue'     ---------引用子组件
	export default{
		components:{                                 ---------注册子组件
			son,
		},
		data(){
			return {
				msg:"这是向儿子传递的数据",
				title:"这是父亲自己的内容"
			}
		},
	}
</script>`

（2）.子组件

子组件里需接收父组件传来的值，代码如下：

<template>
	<div>
		<span style="color: red;display:block ;">{{title}}</span>
		<span>父亲传过来的内容：<i>{{msg}}</i></span>
	</div>
</template>


<script>
	export default {
		props: [
			"msg",                     ---------------用props接收父组件传来的值
		],
		data() {
			return {
				title: "这是儿子自己的内容"
			}
		}

	}
</script>

2.子向父传值

（1）.父组件

父组件里需引用子组件，并在父组件中定义更改值的方法，代码如下：

<template>
	<div style="border: 1px solid #ccc;">
		<div style="border: 1px solid green;width: 200px;height: 200px;margin-bottom: 50px;" >
			<span>哈哈哈哈</span>
			<span style="display: block;">{{ title}}</span>
			<span style="color: #1F7199;">{{ sonvalue }}</span>
		</div>
	<!--    第一个函数名等于子组件中emit中的方法名，第二个函数名等于父组件自己的函数名 -->
	   <son @sendSonValue="getSonValue" ></son>
	</div>
</template>

<script>
	import son from '@/views/son.vue'
	export default{
		components:{
			son,
		},
		data(){
			return {
				msg:"这是向儿子传递的数据",
				title:"这是父亲自己的内容",
				sonvalue:""
			}
		},
		methods:{
		   // 父组件中改变值的方法
			getSonValue(data){
				this.sonvalue = data
				console.log(this.sonvalue)
			}
		}
	}
</script>

（2）.子组件

子组件里需调用父组件中更改值的方法并给父组件传值，代码如下：

<template>
	<div>
		<input type="button" @click="sendValue" value="给父组件传值">
		<span style="color: red;">{{title }}</span>
	</div>
</template>


<script>
	export default {
		props: [
			"msg",
		],
		data() {
			return {
				title: "我是子组件向父组件传的值"
			}
		},
		methods:{
			sendValue(){
				// 
			    const self = this 
				//   -------函数值等于父组件中@后面的函数   ---要传的值
				// 子组件中调用父组件中更改值的方法，并把值传给父组件
				self.$emit('sendSonValue',this.title)
			}
		}

	}
</script>

传值之前：

传值之后：

3.父组件调用子组件的方法

（1）.父组件

父组件里需引用子组件，并在父组件的方法中调用子组件的方法，代码如下：

<template>
	<div style="border: 1px solid #ccc; width: 500px;margin: auto;">
		<button @click="fatherMethod">点击按钮调用子组件的方法</button>
		<!-- 子组件需要定义ref属性 -->
	   <son ref="child" ></son>
	</div>
</template>

<script>
	import son from '@/views/son.vue'
	export default{
		components:{
			son,
		},
		data(){
			return {
				msg:"这是向儿子传递的数据",
				title:"这是父亲自己的内容",
				sonvalue:""
			}
		},
		methods:{
			
			fatherMethod(){
				// 父组件调用子组件的方法
				this.$refs.child.sonMethod();
			}
		}
	}
</script>

（2）.子组件

子组件中只需要定义自己的方法即可，代码如下：

<template>
	<div>
		<span style="color: red;">{{title }}</span>
	</div>
</template>


<script>
	export default {
		props: [
			"msg",
		],
		data() {
			return {
				title: "我是子组件向父组件传的值"
			}
		},
		methods:{
			sonMethod(){
				console.log("我是子组件的方法")
				this.title="woshizizujian"
			}
		}

	}
</script>

调用之前：

调用之后：

二.非父子组件之间传值

目前网上有两种方式：bus总线传值和vuex定义全局变量

1.bus总线

new Vue({
    el:"#app",
    render:h=>app,
    beforeCreate(){
        Vue.prototype.$bus = this //安装全局事件总线    
    }
})

//传递事件
this.$bus.$emit("sendStudentName","99")
//接收事件
this.$bus.$on("sendStudentName",data=>{
    console.log("我是其他组件，接收了值",data)
}))
//组件销毁前把事件销毁
beforeDestroy(){
    this.$bus.$off("sendStudentName")
}