vue-component通信

最新推荐文章于 2024-08-09 07:57:42 发布

毛默默不吃鱼

最新推荐文章于 2024-08-09 07:57:42 发布

阅读量169

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40869401/article/details/109231651

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

//main.js
import Vue from 'vue'
import App from './App'
import './filter/timeFormat.js'
Vue.config.productionTip = false
Vue.prototype.$bus = new Vue()
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
//app.vue
<template>
    <div id="app">
		<header>
			<div class="recommend" @click="comName = 'Recommend'" :class="{'active': comName == 'Recommend'}">推荐</div>
			<div class="sort" @click="comName = 'Sort'" :class="{'active': comName == 'Sort'}">排行</div>
		</header>
		<main>
			<div :is="comName"></div>
		</main>
        <Play v-show="flag" />
	</div>
</template>

<script>
import Recommend from './components/Recommend'
import Sort from './components/Sort'
import Play from './components/play'
export default {
    name: "App",
	components: {
		Recommend,
		Sort,
        Play
	},
    mounted() {
        this.$bus.$on("show", (bool) => {
            this.flag = bool
        })
    },
	data() {
		return {
			comName: "Recommend",
            flag: false
		}
	},
};
</script>

<style>
* {
	margin: 0;
	padding: 0;
}
html, body, #app {
	width: 100%;
	height: 100%;
}
#app {
	display: flex;
	flex-direction: column
}
header {
	height: 44px;
	background-color: #eee;
	display: flex;
}
header div {
	flex: 1;
	text-align: center;
	line-height: 44px;
}
header div.active {
	color: red;
}
main {
	flex: 1;
}
</style>
//filter
import Vue from 'vue'
Vue.filter("format", (time) => {
    // 173 => 02:53
    var min = parseInt(time / 60)
    var sec = time % 60
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;
    return min + ":" + sec
})

//sort.vue
<template>
    <div>
        <button @click="show">跳到音乐播放</button>
    </div>
</template>

<script>
    export default {
        methods: {
            show() {
                this.$bus.$emit("show", true)
            }
        }
    }
</script>

<style scoped>

</style>
//song.vue
<template>
    <div>
        <div :style="{background: bgc}" class="box"></div>
        <p>{{ title }}</p>
    </div>
</template>

<script>
    export default {
        props: ["bgc", "title"]
    }
</script>

<style scoped>
    .box {
        width: 100px;
        height: 100px;
    }
</style>
//recommend.vue
<template>
    <div>
        <div class="guanfang">
            <h3>官方歌单</h3>
            <div class="list">
                <Song v-for="(item, index) in officeList" :key="index" :bgc="item.bgc" :title="item.title" />
            </div>
        </div>
        <div class="daren">
            <h3>大人歌单</h3>
            <div class="list">
                <Song v-for="(item, index) in fashionList" :key="index" :bgc="item.bgc" :title="item.title" />
            </div>
        </div>
    </div>
</template>

<script>
    import Song from './song'
    export default {
        components: {
            Song
        },
        data() {
            return {
                officeList: [{
                        bgc: "#ccc",
                        title: "流行节奏控"
                    },
                    {
                        bgc: "#eee",
                        title: "流行请有氧"
                    },
                    {
                        bgc: "#333",
                        title: "陈奕迅"
                    }
                ],
                fashionList: [{
                        bgc: "#ccc",
                        title: "重温经典"
                    },
                    {
                        bgc: "#eee",
                        title: "DJ歌曲"
                    },
                    {
                        bgc: "#333",
                        title: "值得收藏"
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .list {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
    }
</style>
//