方法一:(bus事件总线)推荐
一、 main.js
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
},
})
二、App 搜索案例
APP组件
<template>
<div class="app">
<Search />
<br />
<hr />
<List />
</div>
</template>
<script>
import List from '@/components/List'
import Search from '@/components/search'
export default {
name: 'App',
components: { List, Search },
data () {
return {
dataList: [],
}
}
}
</script>
<style>
.app {
width: 90vw;
margin: 20px auto;
}
</style>
三、在Search组件中 通过
this.$bus.$emit
方法先提交一个bus事件
Search组件
<!--
* @Description:
* @Author: Ran junlin
* @Date: 2022-02-11 10:02:28
* @LastEditTime: 2022-02-11 14:44:38
* @LastEditors: Ran junlin
-->
<template>
<div class="search">
<input type="text" placeholder="请输入名称" v-model="keyWord" />
<button @click="searchBtn">搜索</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Test',
data () {
return {
keyWord: ''
}
},
methods: {
searchBtn () {
if (this.keyWord.trim()) {
this.$bus.$emit('updateListData', [], true, false)
axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(res => {
this.$bus.$emit('updateListData', res.data.items, false, false)
},
error => {
this.$bus.$emit('updateListData', [], false, false)
console.log(error.message);
}
)
}
}
},
}
</script>
<style scoped>
.search {
width: 50%;
margin: 0 auto;
}
input {
width: 70%;
height: 38px;
}
button {
width: 60px;
height: 38px;
margin-left: 5px;
}
</style>
四、List组件中挂载和调用方法
<!--
* @Description:
* @Author: Ran junlin
* @Date: 2022-02-11 10:02:28
* @LastEditTime: 2022-02-11 14:45:15
* @LastEditors: Ran junlin
-->
<template>
<div class="List-content">
<ul class="list" v-if="dataList.length">
<li v-for="item in dataList" :key="item.id">
<transition appear>
<div class="user-item">
<img class="img" :src="item.avatar_url" alt="" />
<span class="name">{{ item.login }}</span>
</div>
</transition>
</li>
</ul>
<div v-if="loading">loading...</div>
<div v-if="isFirst">欢迎!</div>
</div>
</template>
<script>
export default {
name: 'List',
data () {
return {
dataList: [],
isFirst: true,
loading: false
}
},
mounted () {
this.$bus.$on('updateListData', (dataList, loading, isFirst) => {
this.dataList = dataList
this.loading = loading
this.isFirst = isFirst
})
},
}
</script>
<style scoped>
.v-enter-active {
animation: myAn 0.5s linear;
}
.v-leave-active {
animation: myAn 0.5s reverse;
}
@keyframes myAn {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
.List-content {
width: 80vw;
}
.list {
box-shadow: 3px 2px 3px 1px #ccc;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
li {
width: calc(100% / 3);
height: 250px;
list-style: none;
margin: 10px auto;
padding: 5px;
}
.img {
width: 200px;
height: 200px;
border-radius: 50%;
}
.user-item {
width: 100%;
padding: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
border: 1px solid rgb(230, 230, 230);
border-radius: 9px;
}
.nodata {
font-size: 24px;
text-align: center;
height: 200px;
line-height: 200px;
color: rgb(114, 109, 109);
}
</style>
二、 方法二:search传递给App父组件,父再传给list子组件(比较麻烦)
三、方法三(消息订阅与发布)
以pubsub中间件为例子
1.安装 npm i pubsub-js
2.引入 import pubsub from ‘pubsub-js’
3.search组件发布消息,使用 pubsub.publish(‘事件名’,参数)
4.list组件订阅
this.dataList= pubsub.subscribe('事件',(msgName,参数)=>{
console.log(this)
// console.log('有人发布了hello消息,hello消息的回调执行了',msgName,data)
})
beforeDestroy() {
// this.$bus.$off('hello')
pubsub.unsubscribe(this.dataList)
},