vue.js之组件之间的数据传递

$emit (传递数据)

触发当前实例上的事件。附加参数都会传给监听器回调。

$on (接收数据)

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

---

子组件通过$emit传递数据到父组件

<div id="app">
    <p>{{ total }}p>
    <button-counter v-on:increment="incrementTotal">button-counter>
div>

<script>
    Vue.component('button-counter', {
        template: '{{ counter }}',
        data: function () {
            return {
                counter: '子组件的数据'
            } //组件数据就是这样的，函数式的，请注意
        },
        methods: {
            increment: function () {
                this.$emit('increment', [this.counter]);
            }
        }
    });


    new Vue({
        el: '#app',
        data: {
            total: '父组件的数据:'
        },
        methods: {
            incrementTotal: function (e) {
                this.total = this.total + e[0]
                console.log(e);
            }
        }
    })
script>

1. 在子组件上绑定一个click事件，触发 increment 方法
2. 在 increment 方法中用 $emit 定义一个自定义事件 increment ，同时传入 [this.counter] 参数
3. 在父组件 button-counter 上绑定步骤2中自定义的 increment 事件，方法名为 incrementTotal
4. 在父组件中调用步骤3中的 incrementTotal 方法，这时 incrementTotal 方法就能接收到子组件传入的参数

---

兄弟组件之间的数据传递

//相当于new了一个vue实例，Event中含有vue的全部方法；
var Event = new Vue();　　


//发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是该数据的值；
Event.$emit('msg',this.msg); 


//接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作
Event.$on('msg',function(msg){　　
　　//这里是对数据的操作
})

 <div id="box">
     <dom-a>dom-a>
     <dom-b>dom-b>
     <dom-c>dom-c>
 div>

 <script>
     //准备一个空的实例对象
     var Event = new Vue();

     //组件A
     var A = {
         template: `
             

             
{{a}}
             
             
         `,
         methods: {
             send() {
                 Event.$emit("a-msg", this.a);
             }
         },
         data() {
             return {
                 a: "我是a组件中数据"
             }
         }
     };
     //组件B
     var B = {
         template: `
             

             
{{a}}
             
             
         `,
         methods: {
             send() {
                 Event.$emit("b-msg", this.a);
             }
         },
         data() {
             return {
                 a: "我是b组件中数据"
             }
         }
     };
     //组件C
     var C = {
         template: `
             

             
我是C组件
             接收过来A的数据为: {{a}}
             

             接收过来B的数据为: {{b}}
             
         `,
         mounted() {
             //接收A组件的数据
             Event.$on("a-msg", function (a) {
                 this.a = a;
             }.bind(this));

             //接收B组件的数据
             Event.$on("b-msg", function (a) {
                 this.b = a;
             }.bind(this));
         },
         data() {
             return {
                 a: "",
                 b: ""
             }
         }
     };
     window.onload = function () {
         new Vue({
             el: "#box",
             components: {
                 "dom-a": A,
                 "dom-b": B,
                 "dom-c": C
             }
         });
     };
 script>