vue-在组件中使用v-model

最新推荐文章于 2024-04-09 14:48:57 发布

疯狂的夏铭予

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42356513/article/details/125122441

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

使用场景

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

示例

父组件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>

<style scoped lang="less"></style>

子组件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>

<style scoped lang="less"></style>

点击前

在这里插入图片描述

点击后
在这里插入图片描述

V-Model的本质

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

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

<template>
  <home-child :value="vModelData" @input="vModelData = $event"></home-child>
</template>

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

<style scoped lang="less"></style>