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

Question

如下代码

想实现一个计数器, 计数器是没问题了,就是想使用场景里一般个数都会传回来, 我这个个数如何传入到组件里, 传入到组件里如何使用 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>

Answer 1

朋友你应该是父组件上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)
                }
            }
        }
    });

Answer 2

用vuex吧

Answer 3

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

Answer 4

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

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

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