VUE 兄弟通信（除了父子就是兄弟）

最新推荐文章于 2024-07-02 17:50:31 发布

Le_OOP

最新推荐文章于 2024-07-02 17:50:31 发布

阅读量347

点赞数

本文链接：https://blog.youkuaiyun.com/Le_OOP/article/details/81745692

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟组件通信</title>
</head>
<body>
<div  id="app">
    <brother></brother>
    <hr>
    <sbrother></sbrother>
</div>
<template  id="brother">
    <div>
        哥哥
         {{msg}}
        <button @click="gchan">哥哥</button>
    </div>
</template>
<template  id="sbrother">
    <div>
        弟弟
        {{msg}}
    {{change()}}
    </div>
</template>
<script src="vue.js"></script>
<script>
    let  bus=new Vue();
    Vue.component("brother",{
        template:"#brother",
        data(){
            return {
                msg:"我是你哥哥"
            }
        },
        methods:{
            gchan(){
                bus.$emit("suibian",this.msg)
            }
        }
    });
    Vue.component("sbrother",{
        template:"#sbrother",
        data(){
            return {
                msg:"我是你弟弟"
            }
        },
        created(){
        },
        mounted(){
            bus.$on("suibian",(val)=>{
                this.msg=val;
            })
        },
        methods:{
            change(){
            }
        }
    })
    new Vue({
    }).$mount("#app")
</script>
</body>
</html>