子传父和父传子的相结合
<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>