En Vue 3, ¿puedo crear una referencia a partir de un accesorio que es un objeto para modificar en mi componente?
<template> <button @click.prevent="increment">You've clicked me {{ countObj.count }} times</button> </template> <script> import { defineComponent, ref } from 'vue' export default defineComponent({ props: { startingCount: { type: Object, default: () => ({ count: 0 }) } }, setup (props) { const countObj = ref(props.startingCount) const increment = () => { countObj.value.count++ } return { countObj, increment, } } }) </script> ¿Mi accesorio también se modificaría al modificar countObj ?
¡La respuesta corta es sí! Se modificarán tanto el prop startingCount como countObj .
Lo que es más interesante, es que si el componente principal pasa un objeto reactivo para el apoyo de cuenta startingCount , ¡entonces el reactivo en el elemento principal también cambiará de forma reactiva!Véalo en vivo
Pero esto se considera una mala práctica. No debe modificar accesorios directamente. De documentos:
Todos los accesorios forman un enlace unidireccional entre la propiedad secundaria y la principal: cuando la propiedad principal se actualiza, fluirá hacia la secundaria, pero no al revés. Esto evita que los componentes secundarios cambien accidentalmente el estado de los padres, lo que puede hacer que el flujo de datos de su aplicación sea más difícil de entender.
Para realizar una mutación en el componente principal, puede emitir un evento .
Obtenga más información sobreel flujo de datos unidireccional, incluido el caso de uso de accesorios de matriz/objeto mutante.
En su caso, para solucionar el problema de mutación de accesorios, reemplace esto:
const countObj = ref(props.startingCount)
con:
const countObj = ref({ count: props.startingCount.count })