@[TOC]

一、v-model是什么

v-model是Vue框架的一种内置的API指令，本质是一种语法糖写法，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。在Vue中，v-model是用于在表单元素和组件之间创建双向数据绑定的指令。它可以简化表单元素的绑定，使得在用户输入时能够自动更新数据。

v-model是value+input的语法糖，是v-band和v-on的简洁写法。v-model就实现了双向数据绑定，实际上它就是通过Vue提供的事件机制。即在子组件通过$emit()触发一个事件，在父组件使用v-model即可。

二、什么是语法糖

在计算机科学中，语法糖（syntactic sugar）是指编程语言中可以更容易地表达一个操作的语法。它可以使程序员更加容易地使用这门语言，使操作变得更加清晰、方便，或者更加符合程序员的编程习惯。

具体来说，语法糖是语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。

语言的处理器，包括编译器，静态分析器等，经常会在处理之前把语法糖构件转换成更加基础的构件，这个过程通常被称为"desugaring"。

简而言之，语法糖就是一种便捷写法。例如：input.map(a => a-8); 去掉语法糖就是：input.map(function (a) { return a - 8; }); 通过例子你可以看出来，语法糖的使用其实就是让我们的写的代码更简单，看起来也更容易理解。

三、v-model常见的用法

单向数据绑定: 在Vue中，我们可以使用v-bind实现单项的数据绑定，也就是通过父组件向子组件传入数据 ，但是反过来，子组件不可以修改父组件传递过来的数据 ，这也就是所谓的单向数据绑定。

双向数据绑定 v-bind和v-on实现了双向绑定实现了双向数据绑定。

1、对于输入框（input）：

<input type="text" v-bind:value="value" v-on:input="value = $event.target.value" />

或

<input type="text" :value="value" @input="value = $event.target.value" />

v-model是v-bind和v-on的语法糖，即，v-model算是v-band和v-on的简洁写法。

<input type="text" v-model="value" />

在这个例子中，v-model将输入框的值与数据对象中的value属性进行了绑定。当用户输入时，value的值会自动更新。

2、对于复选框（checkbox）：

<input v-model="checked" type="checkbox">

在这个例子中，v-model将复选框的选中状态与数据对象中的checked属性进行了绑定。当用户选中或取消选中复选框时，checked的值会自动更新。

3、对于选择框（select）：

<select v-model="selected">  
  <option value="option1">Option 1</option>  
  <option value="option2">Option 2</option>  
</select>

在这个例子中，v-model将选择框的值与数据对象中的selected属性进行了绑定。当用户选择一个选项时，selected的值会自动更新为所选选项的value值。

4、对于组件（component）：

父组件

<template>
    <div>
        <child-component v-model="message"></child-component>
        <p>Message from parent component: {{ message }}</p>
    </div>
</template>  
    
<script>
import ChildComponent from './childComponent.vue';

export default {
    data() {
        return {
            message: 'hello world'
        };
    },
    components: {
        ChildComponent
    }
};
</script>

子组件

<template>
    <div>
        <p>Message from parent component: {{ value }}</p>
        <button type="button" @click="updateValue">更新</button>
    </div>
</template>  
    
<script>
export default {
    props: {
        value: {
            type: String,
            default: ""
        }
    },
    methods: {
        updateValue() {
            this.$emit("input", 'update message');
        }
    }
};
</script>

在这个例子中，父组件将message属性绑定到子组件的value属性上，并使用v-model指令来实现双向数据绑定。子组件内部点击按钮更新message，并使用$emit()触发一个事件，从而更新父组件的message属性。

---

除了以上的例子，v-model还可以用于其他表单元素和组件，如文本域（textarea）、开关（switch）等。它的工作原理是监听表单元素的输入事件，将输入值同步到绑定的数据属性上，同时当数据属性的值发生变化时，也会自动更新表单元素的值。

需要注意的是，v-model使用的数据属性通常应该是响应式对象或数组，这样才能够实现数据的双向绑定。如果使用非响应式对象或数组，v-model可能无法正常工作。

四、v-model修饰符

v-model有一些常用的修饰符，它们可以用来控制v-model的行为。使用这些修饰符可以让我们更方便地控制v-model的行为，提高开发效率。

以下是一些常用的v-model修饰符：

<input v-model.lazy="message">  
<input v-model.number="message">  
<input v-model.trim="message">

• .lazy：用于实现懒加载，只有当输入框获取焦点时才会更新绑定的数据。
• .number：我们的输入将自动将输入转为字符串—即使我们将输入是数字。确保将值作为数字处理的一种方法是使用. number修饰符。根据Vue文档，如果输入发生变化，并且parseFloat()无法解析新值，那么将返回输入的最后一个有效值。
• .trim：与大多数编程语言中的trim方法类似，.trim修饰符在返回值之前删除开头或结尾的空格。

五、v-model 仅仅是语法糖吗？

v-model不仅仅是语法糖，它还具有创建响应式数据的功能。v-model将组件的value属性和input事件进行绑定，实现数据的双向绑定。同时，v-model还可以创建响应式数据，例如在表单元素上绑定一个不存在的属性，v-model会自动创建该属性，并且该属性是响应式的。因此，v-model的作用不仅仅是语法糖，还包括创建响应式数据和实现数据的双向绑定。

举个例子：

<template>  
  <div>  
    <input type="text" v-model="user.age">  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      user:{
        name:"张三"
      }
    };  
  }  
};  
</script>

在这个例子中，响应式数据user中没有定义 user.age 属性，但是 template 里却用 v-model 绑定了 user.age，v-model会在user 上新增 age 属性，并且 age 这个属性还是响应式的。

六、v-model 是单向数据流吗？

虽然官方没有明确表示这点，但我们可以捋一捋两者的关系。

• 什么是单项数据流？ 子组件不能改变父组件传递给它的 prop 属性，推荐的做法是它抛出事件，通知父组件自行改变绑定的值。

• v-model 的做法是怎样的？ v-model 做法完全符合单项数据流。甚至于，它给出了一种在命名和事件定义上的规范。

单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。

七、如何让自定义组件支持 v-model？

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 属性 用于不同的目的。model 选项可以用来避免这样的冲突。

在定义 vue 组件时，你可以提供一个 model 属性，用来定义该组件以何种方式支持 v-model。

model 属性本身是有默认值的，如下：

// 默认的 model 属性
export default {
  model: {
    prop: 'value',
    event: 'input'
  }
}

也就是说，如果你不定义 model 属性，或者你按照上面方法定义属性，当其他人使用你的自定义组件时，v-model="foo" 就完全等价于 :value="foo" 加上 @input="foo = $event"。

让我们看个例子。

先定义一个自定义组件：

<template>
    <div>
        当前数量是{{ count }}
        <el-button @click="changeCount(1)">加</el-button>
        <el-button @click="changeCount(-1)">减</el-button>
    </div>
</template>
<script>
export default {
    props: {
        count: {
            type: Number,
            default: 1
        },
    },
    // // 自定义v-model的格式
    model: {
        prop: 'count',// 代表 v-model 绑定的prop名
        event: 'input'// 代码 v-model 通知父组件更新属性的事件名
    },
    methods: {
        changeCount(step) {
            const newCount = this.count + step
            this.$emit('input', newCount)
        },
    }
}
</script>

然后我们在父组件中使用该组件：

<template>
    <div>
        <child-component v-model="count"></child-component>
    </div>
</template>
<script>
import ChildComponent from './childComponent.vue';
export default {
    data() {
        return {
            count: 6
        };
    },
    components: {
        ChildComponent
    }
};
</script>

在这个例子中，这里的 count 的值将会传入这个名为 count 的 prop。同时当 触发一个 changeCount 事件并附带一个新的值的时候，这个 count 的 property 将会被更新。

注意你仍然需要在组件的 props 选项里声明 count 这个 prop。

@[TOC]

前言

vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？

如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。

EventBus的简介

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

EventBus是 基于 订阅/发布 模式实现的 基于事件的异步分发处理系统。 好处就是能够解耦 订阅者 和 发布者，简化代码。

发布者通过EventBus发布事件，订阅者通过EventBus订阅事件，当发布者发送事件时，订阅该事件的订阅者的事件处理方法将被调用。从图中看出，发布者发送一个事件时，则该事件将会同时传递给一个或多个该事件的订阅者。

订阅者(Subscriber)把自己想订阅的事件(Event)注册(register)到调度中心(EventBus)，当发布者(Publisher)发布该事件到调度中心时，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码(onEvent())。

EventBus的优点

• 简化了组件间间的通信；
• 对事件通信双方进行解耦 ；
• 避免了复杂且容易出错的依赖性和生命周期问题；
• 速度快，性能好，代码简单优雅；
• 分离了事件的发送者和接受者;

如何使用EventBus

一、初始化

首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，新创建一个 .js 文件，比如 event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。

另外一种方式，可以直接在项目中的 main.js 初始化 EventBus :

// main.js
Vue.prototype.$EventBus = new Vue()

注意，这种方式初始化的EventBus是一个全局的事件总线。稍后再来聊一聊全局的事件总线。

现在我们已经创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。

二、发送事件

假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想=通知 B页面。

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

接下来，我们需要在 B页面 中接收这则消息。

三、接收事件

<!-- IncrementCount.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};
</script>

同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法：

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))

// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

前面提到过，如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。

四、移除事件监听者

如果想移除事件的监听，可以像下面这样操作：

import { 
  eventBus 
} from './event-bus.js'
EventBus.$off('aMsg', {})

你也可以使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听。或者直接调用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数 。

上面就是 EventBus 的使用方法，是不是很简单。上面的示例中我们也看到了，每次使用 EventBus 时都需要在各组件中引入 event-bus.js 。事实上，我们还可以通过别的方式，让事情变得简单一些。那就是创建一个全局的 EventBus 。接下来的示例向大家演示如何在Vue项目中创建一个全局的 EventBus 。

五、创建全局EventBus

var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

在这个特定的总线中使用两个方法$on和$emit。一个用于创建发出的事件，它就是$emit；另一个用于订阅$on：

var EventBus = new Vue();

this.$bus.$emit('nameOfEvent', { ... pass some event data ...});

this.$bus.$on('nameOfEvent',($event) => {
  // ...
})

然后我们可以在某个Vue页面使用this.$bus.$emit("sendMsg", '我是web');，另一个Vue页面使用

this.$bus.$on('sendMsg', function(value) {
  console.log(value); 
})

同时也可以使用this.$bus.$off('sendMsg')来移除事件监听。

总结

本文主要通过简单的实例学习了Vue中有关于 EventBus 相关的知识点。主要涉及了 EventBus 如何实例化，又是如何通过 $emit 发送频道信号，又是如何通过$emit发送频道信号，又是如何通过on 来接收频道信号。最后简单介绍了如何创建全局的 EventBus 。从实例中我们可以了解到， EventBus 可以较好的实现兄弟组件之间的数据通讯。