Enseñarle cómo eludir las reglas de flujo de datos unidireccionales de Vue

"Omitir" el flujo de datos unidireccional

---

Considere el siguiente escenario: el componente principal pasa datos al componente secundario en forma de prop, y el componente secundario realiza operaciones relacionadas y modifica los datos, y el valor prop del componente principal debe modificarse (un ejemplo típico es: el componente contador del número de artículos en el carrito de compras).

De acuerdo con el flujo de datos unidireccional y el mecanismo de comunicación de eventos del componente, el componente secundario debe notificar al componente principal a través del evento y modificar los datos de apoyo originales en el componente principal para completar la actualización de estado. La escena de modificar los datos del componente principal en el componente secundario también es relativamente común en los negocios, entonces, ¿hay alguna forma de "eludir" la limitación del flujo de datos unidireccional?

aumento de estado

Puede consultar la mejora de estado de React y transferir directamente la lógica de procesamiento de datos del elemento principal al subcomponente a través de accesorios, y el subcomponente solo puede mostrar datos y montar eventos.

<template>
    <div class="counter">
        <div class="counter_btn" @click="onMinus">-</div>
        <div class="counter_val">{
    
    {value}}</div>
        <div class="counter_btn" @click="onPlus">+</div>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: Number,
                default: 0
            },
            onMinus: Function,
            onPlus: Function
        },
    };
</script>

Luego pase la función del controlador de eventos al llamar

<template>
    <div>
        <counter :value="counter2Val" :on-minus="minusVal" :on-plus="plusVal"></counter>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                counter2Val: 0,
            }
        },
        methods: {
            minusVal(){
                this.counter2Val--
            },
            plusVal(){
                this.counter2Val++
            }
        }
    }
</script>

Obviamente, el aumento de estado no resuelve fundamentalmente el problema, ya que es necesario implementar on-minus y on-plus en cada componente principal.

azúcar sintáctico modelo v

Vue tiene una instrucción v-model incorporada, y v-model es un azúcar sintáctico que se puede desmontar en accesorios: valor y eventos: entrada. Es decir, siempre que el componente proporcione un valor con nombre de accesorio y un evento personalizado con nombre de entrada, si se cumplen estas dos condiciones, el usuario puede usar v-model en el componente personalizado.

<template>
  <div>
    <button @click="changeValue(-1)">-1</button>
    <span>{
    
    {currentVal}}</span>
    <button @click="changeValue(1)">+1</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number // 定义value属性
    }
  },
  data() {
    return {
      currentVal: this.value
    };
  },
  methods: {
    changeVal(val) {
      this.currentVal += parseInt(val);
      this.$emit("input", this.currentVal); // 定义input事件
    }
  }
};
</script>

Entonces solo necesita pasar el comando v-model al llamar

<counter v-model="counerVal"/>

Usando v-model, puede sincronizar fácilmente los datos del componente principal en el componente secundario. En las versiones posteriores a la 2.2, puede personalizar los nombres de accesorios y eventos de la directiva v-model, consulte el elemento de configuración del modelo.

export default {
    model: {
        prop: 'value',
        event: 'input'
    },
    // ...
 }