vue在组件中使用v-model的场景

2023-05-22 原文

一、使用场景

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

二、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', // 默认是value
    event: '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', // 默认是value
    event: '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>

到此这篇关于vue在组件中使用v-model的场景的文章就介绍到这了,更多相关vue使用v-model内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！