[JavaScript知识库]vue中组件传值的方式总结（自己总结 父子 兄弟 组件传值）

一.普通的父子组件传值

1. 父组件传递给子组件

父组件代码：父组件向子组件传递一个值，直接通过绑定属性的方式传递，在子组件上绑定一个属性。 这里绑定了一个那么属性传递值。

<template>
	<view class="content">
		<h2>我是父组件</h2>
		<son :name="name"></son>

	</view>
</template>

<script>
	import son from '@/components/son/son.vue'
	export default {
		comments:{
			son
		},
		data() {
			return {
				name:'张三',
			}
		},
		methods: {
		}
	}
	
</script>

子组件接收父组件传递过来的值：

<template>
	<view class="carcontent">
		<h3>我是子组件</h3>
		<view class="">
			这是父亲传递的值(给我取的名字)：{{name}}
		</view>

	</view>
</template>
<script>
	export default{
		props:['name'],
		data(){
			return {
				
			}
		},
		onLoad() {
			
		},
		methods:{
		}
	}
</script>

这样子组件就接收到了父组件传递过来的 张三 的name值

2. 子组件传递给父组件
子组件给父组件传值需要通过自定义事件来传递
子组件代码：

<button @click="sayThank"></button>
methods:{
	sayThank(){
	//this.$emit('自定义事件名称'，传递的值）
		this.$emit('thankFather','谢谢父亲')
	}
}

//父组件代码

<son :name="name" @thankFather="getThank($event)"></son>
<view>接收子组件的内容：{{content}}</view>
methods: {
	getThank(e){
		console.log(e)
		this.content=e
	}
}

当然如果子组件给父组件传值很多。我们可以以对象形式传递过来数据。 传递的参数还是this.$emit(‘自定义事件名称’，传递的值）

二：兄弟组件传值
父组件内同时引入两个平级的组件，这两个组件就是兄弟组件，兄弟组件直接如何进行传值呢？
父组件内的代码：增加引入了brother这个组件

	<view class="content">
		<h2>我是父组件</h2>
		<son :name="name" @thankFather="getThank($event)"></son>
		<view>接收子组件的内容：{{content}}</view>
		
		<brother></brother>
	</view>
<script>
	import son from '@/components/son/son.vue'
	import brother from '@/components/brother/brother.vue'
	export default {
		comments:{
			son,
			brother
		},
		data() {
			return {
				name:'张三',
				content:''
			}
		},
		onLoad() {

		},
		methods: {
			getThank(e){
				console.log(e)
				this.content=e
			}
		}
	}
	
</script>

我们通过vue中的事件总线 $eventBus来进行值的传递
在main.js页面我们直接把事件总线挂载在Vue原型上

Vue.prototype.$EventBus = new Vue()

在son组件内，我们通过按钮事件传递值
重点是通过this.$eventBus来传值

<button @click="sayThank">给父组件传值</button>
method:{
	sayThank(){
		this.$EventBus.$emit('helloBrother','你好，我的兄弟')
	}
}

brother组件内

<script>
	export default{
		mounted() {
			this.$EventBus.$on('helloBrother',(params)=>{
				console.log(params)
				this.content=params
				
			})
		},
		data(){
			return {
				content:''
			}
		},
		methods:{
			getLove(e){
				console.log(e)
			}
		}
	}
</script>

这样，兄弟组件传值就成功了

另外的传值方式 就是用vuex来进行传值了。vuex我们下一次继续讲。