vue中组件之间如何进行数据通信（vue-在组件中使用v-model）

一            、使用场景

子组件想要使用父组件的值,又想去改父组件的值

二
 
  
 
  
 
  
 
  
 
  
 
  、V-Model的本质

1.给子组件的 value 传个变量

2.监听子组件的input事件,并且把传过来的值赋给父组件的变量

三











、关键步骤

1. props 的使用

在自定义的 vue 文件中            ，声明父组件要向子组件传递的 prop 属性
 
  
 
  
 
  
 
  
 
  
 
  ，例如

props: {// 接收string和number类型的值











，myValue: [String, Number],},

注意： myValue 这个属性名称是可以自定义的  
  
  
  
  
  
，但 [String, Number] 不能写成字符串 ["String","Number"] ,因为此时它们是构造器 
  
  
  
  
  
 ，是 js 的全局 api            。

2. $emit 的使用

$emit 用于向上派发事件


 


 


 


 


 


 ，在自定义组件中触发 
 
 
 
 
 
，例如：

methods: {changeInput ($event) {this.$emit(myInput, $event.target.value) }, }

向上派发myInput事件  
   
   
   
   
   
 ，这样model监听myInput才有意义： 当输入字符时触发input事件

 

 

 

 

 

 ，进而派发触发自定义的myInput事件
 

 

 

 

 

 
， 然后model监听myInput            ，就实现了数据绑定
 
  
 
  
 
  
 
  
 
  
 
  。必须注意
 

 
 

 
 

 
 

 
 

 
 

 ，这里的派发事件名myInput必须和model中的event的值相同











。

PS: 通过watch监听 input标签的值











，然后$emit派发事件                  ，和通过@input派发事件具有一样的效果  
  
  
  
  
  
。只要能达到通信的效果即可
 
 
 
 
 
 
 
 
 
 
 
 ，手段是多样的 
  
  
  
  
  
 。

3. 关键的 model

model是允许 vue 自定义组件使用v-model的关键

















，虽然有时我们不显性的使用它            ，也不影响我们在自定义组件中使用v-model指令
 
  
 
  
 
  
 
  
 
  
 
  ，这只是因为被设置默认值


 


 


 


 


 


 。而有的时候











，显示的使用  
  
  
  
  
  
，并自定义model的prop和event会有益 
 
 
 
 
 
。这是官网关于model的介绍：

允许一个自定义组件在使用 v-model 时定制 prop 和 event  
   
   
   
   
   
 。默认情况下 
  
  
  
  
  
 ，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event


 


 


 


 


 


 ，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的

 

 

 

 

 

 。使用 model 选项可以回避这些情况产生的冲突
 

 

 

 

 

 
。

自定义 model 使用示例：

当我们使用model的默认值的时候value作prop 
 
 
 
 
 
，input作event时  
   
   
   
   
   
 ，可以省略不写model            。

model: {prop: myValue, // 默认是valueevent: myInput, // 默认是input },

四  
  
  
  
  
  
、不使用 model 选项的 v-model

当前🌰 , 我们不对 model 选项进行特殊设置 示例：

1. 父组件 home

<template><home-child v-model="vModelData"></home-child> </template> <script> import HomeChild from ./child/HomeChild.vue export default {name: Home,components: {HomeChild},data () {return {vModelData: hello v-model}} } </script>

2. 子组件homeChild

<template><div class="box"><span>{{ value }}</span><button @click="testVModel">测试v-model</button></div> </template> <script> export default {name: HomeChild,props: {value: {type: String,default: }},methods: {testVModel () {this.$emit(input, 我是子组件)}} } </script> 3. 效果

点击前

点击后

五 
  
  
  
  
  
 、用 model 选项的 组件使用 v-model

1


 


 


 


 


 


 、父组件 <template><div class="home"><h3>输入的实时内容：{{ myValue }}</h3><custom-model v-model="myValue"></custom-model></div> </template> <script> import CustomModel from ./CustomModel export default {name: Home,components: {CustomModel,},data () {return {myValue: }}, } </script> 2. 子组件 <template><!-- 自定义组件中使用v-mode指令 --><input type="search" @input="changeInput" data-myValue=""> </template> <script> export default {name: CustomModel,// 当我们使用model的默认值的时候value作prop

 

 

 

 

 

 ，input作event时
 

 

 

 

 

 
，可以省略不写model
 

 
 

 
 

 
 

 
 

 
 

 。model: {prop: myValue, // 默认是valueevent: myInput, // 默认是input},props: {// 接收string和number类型的值            ，// 注意不能是写成字符串["String","Number"],因为此时它们是构造器
 

 
 

 
 

 
 

 
 

 
 

 ，是全局变量myValue: [String, Number],},methods: {changeInput ($event) {// 向上派发myInput事件











，这样model监听myInput才有意义：当输入字符时触发input事件                  ，// 进而派发触发自定义的myInput事件
 
 
 
 
 
 
 
 
 
 
 
 ，然后model监听myInput

















，就实现了数据绑定this.$emit(myInput, $event.target.value)},} } </script>