vue组件的传值方式

1.父组件往子组件当中传值

在src文件夹下的pages文件夹（路由文件夹）新建index.vue文件，在src文件夹下的components文件夹新建新建test.vue文件

index.vue:

<template>
	<div class="index">
		{{msg}}
		<br>
		--------------
		<br>
		<Test pmsg='父组件传的值'></Test>
	</div>
</template>
<script>
import Test from '../components/test'
export default {
	//当前组件名称
	name:'index',
	//引用的子组件名称
	components:{Test},
	//当前组件的数据
    data() {
      return {
       msg:'这是index路由组件'
      };
    }
  };
</script>

<style>
</style>

test.vue:

<template>
	<div class="test">
		{{msg}}
		<br>
		父组件往test组件传的值为：
		{{pmsg}}
	</div>
</template>

<script>
	export default{
		props:['pmsg'],
		data(){
			return{
				msg:'test组件'
			}
		}
	}
</script>

<style>
	
</style>

2.子组件向父组件传值：
需要使用绑定事件的形式传递参数，使用this.$emit实现参数的传递（必须使用事件，不推荐，建议使用vuex）

父组件：

<template>
	<div class="index">		
        <child @func="getMsgFormSon"></child>
	</div>
</template>
<script>
import child from '../components/test.vue'
export default {
	data () {
		return {
			msgFormSon: ""
		}
	},
	components:{
		child,
	},
	methods:{
			getMsgFormSon(data){
				this.msgFormSon = data
				console.log(this.msgFormSon)
			}
	}
}
</script>
<style>
</style>

子组件：

<template>
	<div class="test">
		<div class="app">
		   <input @click="sendMsg" type="button" value="给父组件传递值">
		</div>
	</div>
</template>
<script>
export default {
	data () {
		return {
			//将msg传递给父组件
			msg: "我是子组件的msg",
		}
	},
	 methods:{
		 sendMsg(){
			 //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
			 this.$emit('func',this.msg)
		 }
	 }
	}
</script>

<style>
</style>

3.兄弟组件之间的传值方式：使用vuex

文章链接：
https://blog.youkuaiyun.com/ziyue13/article/details/120678104