Vue组件详解---组件通信

组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信

自定义事件—子组件给父组件传递数据

使用v­-on 除了监昕 DOM 事件外，还可以用于组件之间的自定义事件。
JavaScript 的设计模式 一一观察者模式， dispatchEvent 和 addEventListener这两个方法。 Vue 组件也有与之类似的一套模式，子组件用$emit（）来 触发事件 ，父组件用$on（）来 监昕子组件的事件 。
小栗子：
第一步：自定义事件
第二步： 在子组件中用$emit触发事件，第一个参数是事件名，后边的参数是要传递的数据
第三步：在自定义事件中用一个参数来接收
小栗子：

<div id="app" style="border:2px solid green;height:400px;">
        您现在的银行卡余额为：{{total}}
        <!--  步骤一： // 父组件中自定义事件 -->
        <son-component @change="handleTotal"></son-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>
        // 需求通过加号按钮和减号按钮 来给父组件传递数据
        Vue.component('son-component', {
            template: '<div>\
                           <button @click="handleincrease">+1000</button> \
                           <button @click="handlereduce">-1000</button>\
                         </div>',
            data: function() {
                return {
                    count: 1000
                }
            },
            methods: {
                handleincrease: function() {
                    this.count = this.count + 1000;
                    // 步骤二
                    // 在子组件中用$emit触发事件， 第一个参数是事件名， 后边的参数是要传递的数据
                    this.$emit('change', this.count)
                },
                handlereduce: function() {
                    this.count = this.count - 1000;
                    // 步骤二
                    // 在子组件中用$emit触发事件， 第一个参数是事件名， 后边的参数是要传递的数据
                    this.$emit('change', this.count)
                }
            },
        })
        var app = new Vue({
            el: '#app',
            data: {
                total: 1000
            },
            methods: {
                // 父组件中自定义事件
                // 步骤三    在自定义事件中用一个参数来接受
                handleTotal: function(value) {
                    // 此处的形参value就是传递过来的数据 this.count
                    this.total = value
                }
            }
        })
    </script>

在组件中使用v-­model

$emit的代码,这行代码实际上会触发一个 input事件, ‘input’后的参数就是传递给v-­model绑定的属性的值

v­-model 其实是一个语法糖，这背后其实做了两个操作

• v-bind 绑定一个 value 属性

• v­-on 指令给当前元素绑定input 事件

要使用v-­model,要做到:
1、接收一个 value 属性。
2、在有新的 value 时触发 input事件
小栗子：

 <div id="app" style="border:2px solid green;height:400px;">
        您的余额为{{total}}
        <!-- <son-component @change="handou"></son-component> -->
        <son-component v-model="total"></son-component>
        v-model ---其实就是绑定了input 事件，当触发input的时候，input事件就会自动接收传递过来的参数（this.count），并赋值给total
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>
        // 需求通过加号按钮和减号按钮 来给父组件传递数据
        Vue.component('son-component', {
            template: '<div>\
                           <button @click="handleincrease">+1000</button> \
                              \
                         </div>',
            data: function() {
                return {
                    count: 1000
                }
            },
            methods: {
                handleincrease: function() {
                    this.count += 1000
                        // this.$emit('change', this.count)
                    this.$emit('input', this.count)
                },
            },
        })
        var app = new Vue({
            el: '#app',
            data: {
                total: 1000
            },
            methods: {
                // handou: function(value) {
                //     // this.total = value
                // }
            },

        })
    </script>