目录
中央事件总线
使用vue的监听和触发来实现中央事件总线方式。
on监听 emit触发，组件按钮绑定点击事件，在事件内部触发。
图示
准备工作
引入Vue及设置图片样式。
准备数据源通过小说网站拿到的json数据；
放在本地json文件中，等待之后请求访问。
示例如下：
<style>
.item img {
width: 60px;
}
</style>
<script src="../lib/vue.js"></script>设置页面元素
创建vue 解析盒子；创建按钮绑定按钮事件，渲染列表使用组件。
示例如下：
<div id="box">
<button @click="handleAjax">点击</button>
<data-item v-for="item in datalist" :key="item.book_id" :mydata="item" @event="handleEvent"></data-item>
<data-info :info="info"></data-info>
</div>创建组件
创建列表组件和详情组件，并使用中央事件总线绑定和监听组件内部通信。
示例如下：
<script>
let bus = new Vue()
Vue.component("dataItem", {
props: ["mydata"],
template:`
<div class="item">"
<img :src="mydata.cover" />
{
{mydata.title}}
<div>
<button @click="handleClick">详情</button>
</div>
</div>`,
methods: {
handleClick() {
bus.$emit("zu1", this.mydata.info)
}
}
})
Vue.component("dataInfo", {
// 组件刚创建好，就开始订阅
data() {
return {
info: ""
}
},
// 生命周期
mounted() {
bus.$on("zu1", (data) => {
console.log("1111111", data)
this.info = data
})
},
template:`
<div class="filminfo"> {
{info}} </div>`
})
let vm = new Vue({
el:"#box",
data: {
datalist: [],
info : ""
},
methods: {
handleAjax() {
fetch("./json/ebook.json")
.then(res => res.json())
.then(res => {
console.log(res.data.data)
this.datalist = res.data.data
})
}
}
})
</script>效果如下：
