<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .item { overflow: hidden; padding: 10px; 400px; border:1px solid red; } .item img { 100px; float: left; } .film{ border:1px solid black; height: 1500px; } .filminfo { 300px; min-height: 200px; background: yellow; position: fixed; right:50px; top:100px; border:1px solid blue; } </style> <script src="lib/vue.js"></script> </head> <body> <div id="box"> <button @click="handleAjax">ajax</button> <film-item v-for="item in datalist" :key="item.filmId" :mydata="item"></film-item> <film-detail ></film-detail> </div> <script> var bus = new Vue() // bus.$on // bus.$emit Vue.component("filmItem",{ props:["mydata"], template:` <div class="item"> <img :src="mydata.poster"/> {{mydata.name}} <div> <button @click="handleClick">详情</button> </div> </div> `, methods:{ handleClick(){ // console.log(this.mydata.synopsis) bus.$emit("kerwin",this.mydata.synopsis) } } }) Vue.component("filmDetail",{ //组件刚刚创建好，就开始订阅 data(){ return { info:"" } }, //生命周期 mounted(){ // console.log("当前组件上树后触发") bus.$on("kerwin",(data)=>{ console.log("1111111",data) this.info = data }) }, template:` <div class="filminfo"> {{info}} </div> ` }) new Vue({ el:"#box", data:{ datalist:[], }, methods:{ handleAjax(){ fetch("./json/test.json") .then(res=>res.json()) .then(res=>{ console.log(res.data.films) this.datalist = res.data.films }) } } }) </script> </body> </html>