vue中央事件总线

最新推荐文章于 2023-08-02 17:56:27 发布

吕招焕

最新推荐文章于 2023-08-02 17:56:27 发布

阅读量127

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/u011090104/article/details/104683569

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

vue中央事件总线

<body>
    <div id="app"></div>
    <script src="./js/vue.js"></script>
    <script>
        var bus = new Vue();
        Vue.component('brother1',{
            data(){
                return{
                    msg:''
                }
            },
            template:`
                <div>
                    <h3>我是brother1组件</h3>
                    <input v-model='msg' v-on:input='clickHandler(msg)'>
                    <brother2></brother2>
                </div>
            `,
            methods:{
                clickHandler:function(val){
                    bus.$emit('clickHandler',val)
                }
            }
        });
        Vue.component('brother2',{
            data(){
                return{
                    message:''
                }
            },
            template:`
                <div>
                    <h3>我是brother2组件</h3>
                    <h3>我是brother1传来的数据:{{message}}</h3>
                </div>
            `,
            mounted(){
                bus.$on('clickHandler',(val)=>{
                    this.message = val;
                })
    
            }
        })
        var App ={
            template:`
                <brother1 />
                
            `
        }
        new Vue({
            el:'#app',
            components:{
                App
            },
            template:`<App />`
        });
    </script>
</body>

吕招焕

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中央事件总线

中央事件总线<body> <div id="app"></div> <script src="./js/vue.js"></script> <script> var bus = new Vue(); Vue.component('brother1',{ ...
复制链接

扫一扫