<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<body>
<div id="app">
<child1></child1>
<child2></child2>
</div>
<script>
var bus=new Vue();//空的Vue
//bus.$on bus.$emit
Vue.component("child1",{
template:`
<div>child1-<button @click="handleclick()">詳細信息</button></div>
`,
methods:{
handleclick(){
//發佈
bus.$emit("kerwin","你會受到");
}
}
}),
Vue.component("child2",{
template:`
<div>child2--訂閱者</div>
`,
mounted(){
console.log("mounted-生命週期--dom創建完後會觸發");
//訂閱
bus.$on("kerwin",(data)=>{
console.log("訂閱者child2--",data);
})
}
})
//中央事件總線
new Vue({
el:"#app",
data:{
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<style>
.item {
overflow: hidden;
padding: 10px;
width: 400px;
border: 1px solid red;
}
.item img {
width: 100px;
float: left;
}
.film {
border: 1px solid black;
height: 1500px;
}
.filminfo {
width: 300px;
min-height: 200px;
background: yellow;
position: fixed;
right: 50px;
top: 100px;
border: 1px solid blue;
}
</style>
<body>
<div id="app">
<button @click="handleAjax">ajax </button>
<film-item v-for="data in datalist" :key="data.filmId" :item="data" ></film-item>
<film-detail ></film-detail>
</div>
<script>
var bus=new Vue();//空的Vue
Vue.component("filmDetail",{
template:`
<div class="filminfo">
{{info}}
</div>
`,
mounted(){
console.log("mounted-生命週期--dom創建完後會觸發");
//訂閱
bus.$on("kerwin",(data)=>{
console.log("訂閱者child2--",data);
this.info=data;
})
},
data(){
return {
info:""
}
}
}),
Vue.component("filmItem", {
props: ["item"],
template: `
<div class="item"> <img :src="item.poster">{{item.name}}
<button @click="handliclick()">詳情</button>
</div>
`,
methods: {
handliclick(data) {
bus.$emit("kerwin",this.item.synopsis)
}
}
})
new Vue({
el: "#app",
data: {
datalist: [],
info:""
},
methods: {
//http://192.168.0.105/wj1/2021/vue/vue2/html/04%E7%BB%84%E4%BB%B6/%E4%B8%AD%E9%97%B4%E4%BA%BA%E6%A8%A1%E5%BC%8F.html
handleAjax() {
axios.get("http://192.168.0.105/wj1/2021/vue/vue2/html/04%E7%BB%84%E4%BB%B6/test.json")
.then(res => {
this.datalist = res.data.data.films
})
},
}
});
</script>
</body>
</html>
