Vue工作生活

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

2019-06-30  本文已影响6人  缺月楼

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

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

使用v­-on 除了监昕 DOM 事件外,还可以用于组件之间的自定义事件。
JavaScript 的设计模式 一一观察者模式, dispatchEventaddEventListener这两个方法。 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-­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>
上一篇 下一篇

猜你喜欢

热点阅读