vuejs v-model 如何接受父级传参

不吐泡的鱼
  • 90

如下代码

想实现一个计数器, 计数器是没问题了,就是想使用场景里一般个数都会传回来, 我这个个数如何传入到组件里, 传入到组件里如何使用 v-model 或者 :value 绑定; 求帮忙~~~

<template>
  <div class="ai-counter"
    :class="{ disdecrement: decrementDisable, disincrement: incrementDisable}"
  >
    <button
      class="btn btn-counter btn-decrement"
      @click="decrement"
    >-</button>
    <input type="text" class="form-control" v-model="currentValue">
    <button
      class="btn btn-counter btn-increment"
      @click="increment"
    >+</button>
  </div>
</template>
<script>
  export default {
    props:{
      min: {
        type: Number,
        default: 1
      },
      max: {
        type: Number,
        default: 999
      },
      currentValue: {
        type: Number,
        default: 1
      }
    },
    methods: {
      increment(){
        this.currentValue ++
        if( this.currentValue >= this.max ){
          this.incrementDisable = true
          this.currentValue = this.max
        }else{
          this.incrementDisable = false
          this.decrementDisable = false
        }
      },
      decrement() {

        this.currentValue --
        if( this.currentValue <= this.min ){
          this.decrementDisable = true
          this.currentValue = this.min
        }else{
          this.decrementDisable = false
          this.incrementDisable = false
        }
      }
    },
    data(){
      return{
        decrementDisable: true,
        incrementDisable: false
      }
    },
    computed(){

    }
  }
</script>
回复
阅读 7.3k
4 个回答
✓ 已被采纳

朋友你应该是父组件上v-model ,在子组件里要$emit提交到父组件 this.$emit('input', this.val)
就是说你少一个子组件提交到父组件
<my-counter v-model="num"></my-counter>
Vue.component("my-counter", {

        template: `<div>
            <h1>{{value}}</h1>
            <button @click="plus">+</button>
            <button @click="minu">-</button>
        </div>`,
        props: {
            value: Number
        },
        data: function() {
            return {
                val: this.value
            }
        },
        methods: {
            plus() {
                this.val = this.val + 1;
                this.$emit('input', this.val)
            },
            minu() {
                if(this.val>0){
                    this.val = this.val-1;
                    this.$emit('input', this.val)
                }
            }
        }
    });

直接在父组件中把要传的值放在子组件中的属性上,不知道是不是你要的答案

首先引入你的组件,假如起的名字叫counter,那么穿值方法就是使用props中申明的样子:

<counter :currentValue=10 :max=10000 :min=0></counter>

就是这么简单,需要注意的时,这里的传值是单向的,比如需要绑定当前组件的某个值(如myCount)到currentValue上,当myCount变化时,counter组件的currentValue也会随之变化,但是currentValue的变化是不会反过来影响到myCount的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏