zoukankan      html  css  js  c++  java
  • vue 父子通信过程

    1、概述

    每个 Vue 实例都实现了事件接口,即:

    • 使用 $on(eventName) 监听事件
    • 使用 $emit(eventName, optionalPayload) 触发事件

    2、示例一(未传递数据)

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>vue 父子通信过程(未传递数据)</title>
        </head>
    
        <body>
            <div id="root">
                <div id="counter-event-example">
                    <p>{{ total }}</p>
                    <button-counter v-on:increment="incrementTotal"></button-counter>
                    <button-counter v-on:increment="incrementTotal"></button-counter>
                </div>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
            <script type="text/javascript">
                Vue.component('button-counter', {
                    template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
                    data: function() {
                        return {
                            counter: 0
                        }
                    },
                    methods: {
                        incrementCounter: function() {
                            this.counter += 1
                            this.$emit('increment')
                        }
                    },
                });
                new Vue({
                    el: '#counter-event-example',
                    data: {
                        total: 0
                    },
                    methods: {
                        incrementTotal: function() {
                            this.total += 1
                        }
                    }
                });
            </script>
        </body>
    
    </html>

    3、示例二(传递数据)

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>vue 父子通信过程(传递数据)</title>
        </head>
    
        <body>
            <div id="root">
                <div id="message-event-example" class="demo">
                    <p v-for="msg in messages">{{ msg }}</p>
                    <button-message v-on:message="handleMessage"></button-message>
                </div>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
            <script type="text/javascript">
                Vue.component('button-message', {
                    template: `<div>
                        <input type="text" v-model="message" />
                        <button v-on:click="handleSendMessage">Send</button>
                          </div>`,
                    data: function() {
                        return {
                            message: 'test message'
                        }
                    },
                    methods: {
                        handleSendMessage: function() {
                            this.$emit('message', {
                                message: this.message
                            })
                        }
                    }
                })
    
                new Vue({
                    el: '#message-event-example',
                    data: {
                        messages: []
                    },
                    methods: {
                        handleMessage: function(payload) {
                            this.messages.push(payload.message)
                        }
                    }
                })
            </script>
        </body>
    
    </html>
  • 相关阅读:
    Hihocoder 1275 扫地机器人 计算几何
    CodeForces 771C Bear and Tree Jumps 树形DP
    CodeForces 778D Parquet Re-laying 构造
    CodeForces 785E Anton and Permutation 分块
    CodeForces 785D Anton and School
    CodeForces 785C Anton and Fairy Tale 二分
    Hexo Next 接入 google AdSense 广告
    如何统计 Hexo 网站的访问地区和IP
    Design and Implementation of Global Path Planning System for Unmanned Surface Vehicle among Multiple Task Points
    通过ODBC接口访问人大金仓数据库
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8931808.html
Copyright © 2011-2022 走看看