前言
实现自定义组件
提示：以下是本篇文章正文内容，下面案例可供参考
一、在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>
