Vue- v-model 表单 数据双向绑定（$emit）

参考文献
vue官网	— https://cn.vuejs.org/v2/guide/forms.html
- 掘金 axios拦截器 -	— https://juejin.im/post/59a22e71518825242c422604
个人博客主介绍 vue	— https://www.tangshuang.net/3512.html#title-7-6-3
v-model 使用方法	— https://www.cnblogs.com/attacking-cabbage/p/10260393.html
- $emit 父子组件传值 -	— https://www.jianshu.com/p/4cb9353d17dd

可以认真反复阅读：

• 从头开始学习Vuex（git）
• 从头开始学习vue-router（git）
• vue组件三大核心概念（git）
• vue组件间通信六种方式（完整版）
• vue计算属性和watch的区别
• 揭秘Vue中的Virtual Dom

一、v-model：

v-model是一个指令，限制在 input、select、textarea、components 中使用。

Vue 的父子组件通讯模式，父组件通过 props 把数据传递到子组件 （父传子），通过 v-bind: 来动态绑定props的值，子组件修改了数据后把改变通过 $emit 事件 的方式通知父组件 （子传父），所以说组件上的 v-model 也是一种语法糖。

官网方法：

v-model只不过是一个语法糖而已,真正的实现靠的还是 :

• v-bind:绑定响应式数据；
• 触发 input 事件 并传递数据 (重点)

v-bind与v-model区别:
< input :value=“name” v-model=“body”>

• v-bind 产生的效果不含有双向绑定，所以 :value 的效果就是让 input的value属性值等于 data.name 的值；
• v-model 的效果是使input和 data.body 建立双向绑定，因此首先 data.body 的值会给input的value属性，其次，当input中输入的值发生变化的时候，data.body 还会跟着改变；

自动监听 input 事件,并把这个input事件所携带的值 传递给v-model所绑定的属性!这样组件内部的值就给到了父组件了。
监听原生组件的事件,当获取到原生组件的值后把 值通过 调用 this.$emit(‘input’ ,data) 方法 去触发 input事件。

---

关于$emit 的用法：

• 父组件可以使用 props 把数据传给子组件。
• 子组件可以使用 $emit 触发父组件的自定义事件。
• $emit（） 方法的 第一个参数是自定义事件的名称。
• 例子：

子组件：

<template>  
  <div class="train-city">  
    <span @click='select("大连")'>大连</span>  
  </div>  
</template>  
<script>  
export default {  
  name:'trainCity',  
  methods:{  
    select(val) {  
      let data = {  
        cityname: val  
      };  
      this.$emit('showCityName',data); //select事件触发后，自动触发showCityName事件  
    }  
  }  
}  
</script>  

父组件：

<template>  
	<!-- //监听子组件的showCityName事件。  -->
    <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> 
<template>  
<script>  
export default {  
  name:'index',  
  data () {  
   return {  
      toCity:"北京"  
    }  
  }  
  methods:{  
    //触发子组件城市选择-选择城市的事件
    updateCity(data){    
      this.toCity = data.cityname;  //子组件改变了父组件的值  
      console.log('toCity:'+this.toCity)   //打印当前data中 toCity 的值
    }  
  }  
}  
</script>  

---