Vue--兄弟级别组件之间传递参数

最新推荐文章于 2024-05-07 08:48:43 发布

郭浩326

最新推荐文章于 2024-05-07 08:48:43 发布

阅读量1w

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/guohao326/article/details/72784363

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
        <my-comp></my-comp>
        <my-comp2></my-comp2>
</div>
</body>
<script>
        Vue.component("myComp",{
            template:"<div>我是组件1{{opser.name}}<button @click='send'>子组件之间传递参数</button></div>",
            data:function () {
                return {
                    opser : {id:1,name:'小明',password:"123456"}
                }
            },
            methods:{
                send:function () {
                    bus.$emit("myeven",this.opser);//$emit这个方法会触发一个事件
                }
            }
        });
        var bus = new Vue();//这个对象没有其他含义，仅仅就是一个信息对象
        Vue.component("myComp2",{
            template:"<div>我是第二个组件--{{mynew.name}}</div>",
            created:function () {
                var that=this;//这个要注意，this在此时指向信息传递对象，所以需要在外面重新指向this
                bus.$on("myeven",function (msg) {
                    that.mynew=msg;
                })
            },
            data:function () {
                return{
                    mynew:{ }      //先return定义一个空的
                }
            }
        });
    var app=new Vue({
        el:"#app",
    })
</script>
</html>

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue--兄弟级别组件之间传递参数

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="js/vue.js">script>head>body>div id="app"> my-comp>my-comp> my-comp2>my-comp2>div>body>
复制链接

扫一扫

专栏目录