16 Vue- bus通信

作者: 滔滔逐浪 | 来源:发表于2021-08-03 22:34 被阅读0次

16 Vue- bus通信
bus on通信
Vue父传子、子传夫通信--小案例
2022-01-21
DBUS基础知识
Vue兄弟组件之间传值
Vue兄弟组件之间传值
vue兄弟间传值
VUE-组件通信
vue-组件通信

<!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>