uniapp自定义组件

---

前言

实现自定义组件

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、在components目录下创建组件

二、编辑组件

1.子组件

代码如下（示例）：

<template>
	<view class="musicListBox">
		<!-- 图片 -->
		<view class="itemImage" @click="onClickMusic()">
			<image :src="musicList.imageUrl" mode=""></image>
			<view class="stopOrOpen">
				<text class="iconfont icon-bofang"></text>
			</view>
		</view>
		<!-- 歌名歌手 -->
		<view class="itemText" @click="onClickMusic()">
			<!-- 操作 -->
			<view class="item_title">
				{{musicList.musicName}}
			</view>
			<view class="item_detail">
				{{musicList.singerName}}
			</view>
		</view>
		<view class="itemOperation">
			<view class="iconfont icon-aixin" @click="onLike">
				<!-- 点赞收藏 -->
			</view>
			<view class="iconfont icon-gengduo" @click="onShare">
				<!-- 分享 -->
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		//利用props接收数据
		props: {
			musicList: {

			}
		},
		data() {
			return {
			}
		},
		methods: {
			// 利用$emit发送事件
			onClickMusic() {
				this.$emit('childEvent', {
					flag: true,
					list: this.musicList,
				})
			},
			onLike() {
				console.log("点赞")
				console.log(this.musicList.imageUrl);
				// this.styleColor.color='red'

			},
			onShare() {
				console.log("分享")
			}
		}
	}
</script>

2.在父组件中使用子组件

<template>
	<view>
		<!-- 这里的k内有数据，在这篇文章中没声明 -->
		<MusicListBox :musicList="k"  @childEvent="onClickMusic"></MusicListBox>
	</view>
</template>
<script>
	import MusicListBox from '@/components/MusicPlayer/MusicListBox.vue'
	export default {
		data() {
			return {
				isSmallMusicPlayerShow: false,
				musicPropsInfo: []
			}
		},
		components: {
			MusicListBox
		},
		methods: {
			onClickMusic(data) {
				// 子组件传参
				console.log(data);
				this.isSmallMusicPlayerShow = data.flag
				this.musicPropsInfo = data.list
			}
		}
</script>

---

代码效果