El método de paso de valor de componente en Vue3

Existen algunas diferencias entre el método de pasar el valor del componente en Vue3 y Vue2, principalmente porque Vue3 adopta la nueva API de composición.

1. Valor de paso de accesorios

El método de usar Props para pasar datos es el mismo que Vue2, el ejemplo es el siguiente:

// 父组件
<template>
  <child :msg="message"></child>
</template>

<script>
import Child from './Child.vue'

export default {
    
    
  components: {
    
     Child },
  data() {
    
    
    return {
    
    
      message: 'Hello Vue 3!',
    }
  },
}
</script>

// 子组件
<template>
  <div>{
    
    {
    
     msg }}</div>
</template>

<script>
export default {
    
    
  props: {
    
    
    msg: {
    
    
      type: String,
      required: true,
    },
  },
}
</script>

2. Emitir valor de paso

El método de usar Emit para pasar eventos es diferente del método de emisión en Vue2 $El\; métodode\; emisiónes\; diferente.\; Dado\; queno\; hay\; un\; método\; de\; emisión\; enVue3$ , es necesario pasar el evento combinando las funciones de suministro e inyección proporcionadas en la$API$$.$

componente padre:

<template>
  <child @increase="increment"></child>
</template>

<script>
import {
    
     ref } from 'vue'
import Child from './Child.vue'

export default {
    
    
  components: {
    
     Child },
  setup() {
    
    
    const count = ref(0)
    const increment = () => {
    
    
      count.value++
    }
    return {
    
    
      count,
      increment,
    }
  },
}
</script>

Subensamblaje:

<template>
  <button @click="increase">{
    
    {
    
     count }}</button>
</template>

<script>
import {
    
     inject } from 'vue'

export default {
    
    
  setup() {
    
    
    const increase = () => {
    
    
      // 通过provide/inject实现事件传递
      inject('increase')()
    }
    return {
    
    
      increase,
    }
  },
}
</script>

El uso de proporcionar/inyectar para cooperar con la entrega de eventos requiere proporcionar una función en el componente principal y luego usar inyectar en el componente secundario para que el componente principal pase la función. Activar la función en el componente secundario puede desencadenar el evento en el componente principal. componente.

Se puede ver que la transferencia de valor del componente en Vue3 utiliza la nueva API de composición para lograr la transferencia de datos a través de proporcionar/inyectar, y también proporciona un método de desarrollo más conciso, flexible y eficiente.