inserte la descripción de la imagen aquí

Los componentes Vue2, vue3 pasan el valor, el tipo de referencia, cómo lidiar con la matriz de objetos

Extracto

Todos los accesorios forman un único enlace descendente entre sus accesorios principales y secundarios: las actualizaciones del accesorio principal fluyen hacia el componente secundario, pero no al revés. Esto evitará cambios accidentales de componentes secundarios a componentes principales...

El siguiente componente pass-by-value se refiere a 引用类型(matriz u objeto) pass-by-value.
Los principios de vue2 y vue3 son los mismos, si tiene alguna pregunta, deje un mensaje.

Preparar: flujo de datos unidireccional

Todos los accesorios forman una relación entre sus accesorios principales y secundarios 单向下行绑定: las actualizaciones de los accesorios principales fluyen hacia los componentes secundarios, pero no al revés. Esto evita cambios accidentales en el estado del componente principal de los componentes secundarios, lo que puede dificultar la comprensión del flujo de datos de su aplicación.

Además, cada vez que cambie el componente principal, todas las propiedades del componente secundario se actualizarán con los valores más recientes. Esto significa que no debe cambiar accesorios dentro de un componente secundario. Si hace esto, Vue emitirá una advertencia en la consola del navegador.

Esta propiedad se usa para pasar un valor inicial; el componente secundario luego espera usarlo como datos de propiedad local. Defina una propiedad de datos locales y use esta propiedad como su valor inicial

props: ['initialCounter'], 
data: function () {
    
     
	return {
    
     
		counter: this.initialCounter 
	} 
}

Esta propiedad se pasa como un valor sin procesar y debe convertirse. Utilice el valor de esta prop para definir un计算属性

props: ['size'], 
computed: {
    
     
	normalizedSize: function () {
    
    
		return this.size.trim().toLowerCase() 
	} 
}

Tenga en cuenta que los objetos y las matrices se pasan por referencia en JavaScript, por lo que para una matriz o una propiedad de tipo de objeto, en 子组件中改变变更这个对象或数组本身将会影响到父组件的状态.

pregunta

prop transfiere datos de tipo de aplicación (objetos, matrices), y los cambios en los subcomponentes cambiarán directamente el componente principal

Componente principal App.vue

<template>
  <div id="app">
    <child :initialValue="valueEmit">
    </child>
  </div>  
</template>  
<script>
import childEmit from './components/child.vue'
export default {
    
    
data () {
    
    
    return {
    
    
      valueEmit: {
    
    cat: 2}
    }
  },
  components: {
    
    
    child
  }
}        
</script>

Componentes de componentes secundarios/child.vue

<template>
  <div class="child-container">
    <p> 
      <label>child：</label>
      <input type="text" v-model="value.cat" />
    </p>
  </div>
</template>
<script>
export default {
    
    
  name: 'child',
  props: {
    
    
    initialValue: Object
  },
  data () {
    
    
    return {
    
    
      value: this.initialValue
    }
  }
}
</script>

Pregunta 2

Para cambiar el componente secundario sin afectar al componente principal, puede hacer una copia completa de los datos del tipo de referencia, pero el cambio de datos del componente principal no activará la respuesta del componente secundario.Modifique el componente secundario, componentes del componente secundario
/ child.vue

export default {
    
    
  name: 'child',
  props: {
    
    
    initialValue: Object
  },
  data () {
    
    
    return {
    
    
      valueEmit: JSON.parse(JSON.stringify(this.initialValue))
    }
  }
}

Resumir

En nuestro proceso de desarrollo, generalmente nos encontramos con las siguientes tres situaciones:

纯展示¡Use las propiedades del componente principal directamente sin efectos secundarios!

<template>
<div>
    {
    
    {
    
    parentObj.value}}
  </div>
</template>
<script>
export default {
    
    
    name: 'child',
    props: {
    
    
      parentObj: Object
    }
  }
</script>

只子组件内部修改, el componente principal no modificará (es decir, el componente principal solo inicializa) los nuevos datos declarados en los datos del componente secundario, y la referencia se puede cortar con Object.assign()o JSON.parse(JSON.stringify()).

<template>
<div>
    <input type="text" v-model="childObj.value">
  </div>
</template>
<script>
export default {
    
    
    name: 'child',
    props: {
    
    
      parentObj: Object
    },
    data () {
    
    
      return {
    
    
        childObj: Object.assign({
    
    }, this.parentObj)
      }
    }
  }
</script>

父子组件都会修改Procesamiento por computadora o reloj

<template>
<div>
    <input type="text" v-model="childObj.value">
  </div>
</template>
<script>
export default {
    
    
    name: 'child',
    props: {
    
    
      parentObj: Object
    },
    computed: {
    
    
      childObj () {
    
    
        return Object.assign({
    
    }, this.parentObj)
      }
    }
  }
</script>
或者 watch 方式

export default {
    
    
  name: 'child',
  props: {
    
    
    parentObj: Object
  },
  data () {
    
    
    return {
    
    
      childObj: {
    
    }
    }
  },
  watch: {
    
    
    parentObj: {
    
    
      handler (val, oldVal) {
    
    
        if (val) {
    
    
          this.childObj = Object.assign({
    
    }, this.parentObj)
        }
      },
      deep: true,
      immediate: true
    }
  }
}

Acerca de la diferencia entre reloj y computado: la forma correcta de usar vue computado