<!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" @event="handleEvent"></film-item> <!-- {{filmData}} --> <film-detail :film-data="filmData"></film-detail> </div> <script> 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) this.$emit("event",this.mydata.synopsis) } } }) Vue.component("filmDetail",{ props:["filmData"], template:` <div class="filminfo"> {{filmData}} </div> ` }) new Vue({ el:"#box", data:{ datalist:[], filmData:"" }, mounted(){ fetch("./json/test.json") .then(res=>res.json()) .then(res=>{ console.log(res.data.films) this.datalist = res.data.films }) }, methods:{ handleAjax(){ fetch("./json/test.json") .then(res=>res.json()) .then(res=>{ console.log(res.data.films) this.datalist = res.data.films }) }, //自定义事件处理器 handleEvent(data){ console.log("父组件定义",data) this.filmData = data } } }) </script> </body> </html>