zoukankan      html  css  js  c++  java
  • vue3 父子组件之间的数据双向绑定

    父组件: 直接使用 v-model="值"

    子组件:约定写法

    this.$emit("update:modelValue", this.numValue);
    <template>
      <div class="input inlinebox">
        <input type="text" v-model.number="numValue" @input="handleInput" /">
      </div>
    </template>
    
    <script>
    export default {
      name: "NumAddSubtractor",
      props: {
        modelValue: {
          type: Number,
          default: 0
        }
      },
      data: () => ({
        // props里面的值是不可以修改的,所以需要自己声明一个变量,来进行随业务的变化
        numValue: 0
      }),
      beforeMount() {
        this.numValue = this.modelValue;
      },
      methods: {
        dishNumReduce() {
          this.numValue = this.numValue - 1;
          this.$emit("update:modelValue", this.numValue);
        },
        dishNumAdd() {
          this.numValue =  this.numValue + 1;
          this.$emit("update:modelValue", this.numValue);
        },
        handleInput() {
          this.$emit("update:modelValue", this.numValue);
        }
      }
    }
    </script>
    

      

  • 相关阅读:
    Vue自定义指令 directive
    Vue过滤器 filters
    贪心
    家庭作业
    线段
    数列极差
    shell
    智力大冲浪
    加工生产调度
    喷水装置
  • 原文地址:https://www.cnblogs.com/hello-dummy/p/15539773.html
Copyright © 2011-2022 走看看