开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

逸宸 / Vue 创建模板 多模板交互demo小样汇编

Watch 1 Star 0 Fork 0
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
暂无描述 展开 收起

开心 最后提交于 更新 README.md
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

Vue 创建模板 多模板交互demo小样

项目介绍

使用说明 直接 复制代码打开就看见效果了

效果图

<title>多模板方法</title> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //准备一个空的实例对象 // vue中$emit与$on //  var Event = new Vue();      相当于又new了一个vue实例,Event中含有vue的全部方法; // //  Event.$emit('msg',this.msg);    发送数据,第一个参数是发送数据的名称,接收时还用这个名字接收,第二个参数是这个数据现在的位置; // //  Event.$on('msg',function(msg){  接收数据,第一个参数是数据的名字,与发送时的名字对应,第二个参数是一个方法,要对数据的操作 // //    /这里是对数据的操作 // //  }) // Event 是 用来连接多个模板页通讯的 var Event = new Vue(); //模板A var A={ template:`

A组件

{{a}}

`, data(){ return { a:'我是A里面的数据' } }, methods:{ send(){ //A发送数据 Event.$emit('a-msg',this.a); } } }; //模板B var B={ template:`

B组件

{{b}}

`, data(){ return { b:'' } }, methods:{ send(){ Event.$emit('b-msg',this.b); } } }; //模板C var C={ template:`

我是C组件,我在坐等接收数据

{{a}}

{{b}}

`, data(){ return{ a:'', b:'' } }, mounted(){ //两种接收的方式 var _this = this; Event.$on('a-msg',function(a){ _this.a=a; }); Event.$on('b-msg',function(b){ this.b = b; }.bind(this)) } }; //页面加载完毕 在启动实例 window.onload=function(){ new Vue({ el:'#box', data:{
                },
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            })
        }
    </script>
</head>
<body>
    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
</body>

项目点评 ( 0 )

你可以在登录后,发表评论

搜索帮助