Vue3 v-model 组件传值

最新推荐文章于 2024-08-08 17:23:21 发布

ilcola_

最新推荐文章于 2024-08-08 17:23:21 发布

阅读量751

点赞数 1

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

本文链接：https://blog.csdn.net/m0_63056435/article/details/121167987

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文展示了如何在Vue中创建一个数量选择组件`CheckNumber`，该组件包含加减按钮，用于数量的增减，并通过`v-model`双向绑定实现值的传递。组件内部使用`ref`和`watch`来响应模型值的变化，同时提供`add`和`ins`方法更新数值并触发父组件的值更新事件。

摘要由CSDN通过智能技术生成

<CheckNumber :max="5" :min="1" v-model="num"/>

给其他组件传值

<template>
  <div class="xtx-numbox">
    <div class="label">数量</div>
    <div class="numbox">
      <a href="javascript:;" @click="ins">-</a>
      <input type="text" readonly :value="num">
      <a href="javascript:;" @click="add">+</a>
    </div>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  name: 'CheckNumber',
  props: {
    max: {
      type: Number

    },
    min: {
      type: Number,
      default: 1
    },

    // 接收v-modle
    modelValue: {
      type: Number
    }
  },
  setup (props, { emit }) {
    // 定义num接收传过来的值
    const num = ref(props.modelValue)

    // 监听num的变化
    watch(() => {
      return props.modelValue
    }, () => {
      num.value = props.modelValue
    })

    function add () {
      if (num.value === props.max) {
        return
      }
      num.value++

      // 向父组件发送事件
      emit('update:modelValue', num.value)
    }
    function ins () {
      if (num.value === props.min) {
        return
      }
      num.value--
      emit('update:modelValue', num.value)
    }

    return {
      num,
      add,
      ins
    }
  }
}

接收的组件