- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 智能社——http://www.zhinengshe.com
- </title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <style>
- </style>
- <script src="vue.js">
- </script>
- <script>
- //准备一个空的实例对象
- var Event = new vue();
- var A = { //A组件
- template: ` < div > <span > 我是A组件 < /span> -> {{a}}
- <input type="button" value="把A数据给C" @click="send">
- </div > `,
- methods: {
- send() {
- Event.$emit('a - msg', this.a);
- }
- },
- data() {
- return {
- a: '我是a数据'
- }
- }
- };
- var B = {
- template: ` < div > <span > 我是B组件 < /span> -> {{a}}
- <input type="button" value="把B数据给C" @click="send">
- </div > `,
- methods: {
- send() {
- Event.$emit('b - msg', this.a);
- }
- },
- data() {
- return {
- a: '我是b数据'
- }
- }
- };
- var C = {
- template: ` < div > <h3 > 我是C组件 < /h3>
- <span>接收过来的A的数据为: {{a}}</span > <br > <span > 接收过来的B的数据为: {
- {
- b
- }
- } < /span>
- </div > `,
- data() {
- return {
- a: '',
- b: ''
- }
- },
- mounted() {
- //var _this=this;
- //接收A组件的数据
- Event.$on('a - msg',
- function(a) {
- this.a = a;
- }.bind(this));
- //接收B组件的数据
- Event.$on('b - msg',
- function(a) {
- this.b = a;
- }.bind(this));
- }
- };
- window.onload = function() {
- new Vue({
- el: '#box',
- 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>
- </html>
- <!-- 我是A组件 -> 我是a数据 把A数据给C
- 我是B组件 -> 我是b数据 把B数据给C
- 我是C组件
- 接收过来的A的数据为: 我是a数据
- 接收过来的B的数据为: 我是b数据
- -->
来源: http://www.bubuko.com/infodetail-2115647.html