此篇文章以组件传值为核心，两个方面讲解;

1:兄弟界面之间传值(如：组件music1.vue传值给组件music2.vue)
2:index.vue主页面传值给组件值或列表

超级简单的两个步骤：

一：创建music1.vue(传数据的组件)

<template>
    <view><button @click="transferToMuisc2">传递到音乐二的数据</button></view>
</template>

<script>
    export default {
        methods:{
            transferToMuisc2(){
                uni.$emit('changeNum',10) //触发全局变量自定义事件changeNum，该函数为b组件内修改b组件内容的方法  
　　　　　　　　} 
　　　　　　} 
　　} 
</script>

二：创建music2.vue(接收数据的组件)

<template>
    <view>
        该值为接收到music1的值为：{{MusicNum}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                MusicNum:0,
            };
        },
        created(){ //创建全局监听自定义事件  改变内容
            uni.$on('changeNum',MusicNum=>{
                this.MusicNum+=MusicNum
            })
        },
    }
</script>

总结：以上就是组件与组件之间相互传值的方式。复制粘贴即可！

更精彩的赓续如下：

↓

父界面(就是类似page/index.vue)传值给组件(music1.vue)

一：创建index主页面

<template>
	<view class="container">
		<transferMusicOne :reciveUserInfo="musicApiList"></transferMusicOne>
		<transferMusicTwo></transferMusicTwo>

	</view>
</template>

<script>
	
	import music1 from '@../../common/music1.vue'
	import music2 from '@/common/music2.vue'
	export default {
		components: {

			"transferMusicOne": music1,
			"transferMusicTwo": music2
		},
		data() {
			return {
musicApiList: ["name":"张三","sex":"11023.com","adder":"中国"]//此处为api列表，获取到之后传递给music1组件界面
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

二：在组件music2中进行接收indx.vue值

	<view style="width: 100%;margin-top: 30rpx;" v-for="(item, index) in reciveUserInfo" :index="index"
			:key="index">
			<view class="res-play" @tap="goPlay(index,item.name)">
				<image :src="item.imageCode" mode=""></image>
				<view class="res-title">

					<view class="res-name">
						{{item.name}}
					</view>
					<view class="res-num">
						{{item.adder}}
					</view>
				</view>
			</view>
		</view>

export default {
		props: ["reciveUserInfo"],
		data() {
			return {
			musicApiList: [],
			}
		}
	}

总结：上面讲述的index页面传值给组件music2的方法。

希望能够帮助到你，如果依然有疑问的初学者，可以进行留言或者关注。谢谢您的阅读给予我前行的动力～

效果：

1.我的底部是一个组件。
2.上面的列表也是一个组件、列表的数据是在index.vue界面获取到的服务器数据，再传递到组件中的。