Tabla de contenido
compartir datos
En el desarrollo diario, a menudo nos encontramos con el problema de la transmisión de datos entre componentes.En general, la relación de transmisión de datos más utilizada entre estas dos relaciones es:
Los dos métodos de transmisión utilizan métodos diferentes, que se analizarán en detalle a continuación.
Pasar valor de padre a hijo
Compartir datos de componentes principales a componentes secundarios requiere el uso de propiedades personalizadas. El código de ejemplo es el siguiente:
componente principal
El componente padre introduce el componente hijo y lo registra usando
<template>
<CommodityInfo :msg='message'></CommodityInfo>
</template>
<script>
import CommodityInfo from "./components/CommodityInfo.vue";
export default {
components: {
CommodityInfo},
data(){
return{
message:'父组件'
}
}
}
</script>
Al :msg='message'pasar el mensaje a CommodityInfo,
el mensaje aquí corresponde al nombre del método recibido por el subcomponente ( por lo que los campos deben ser consistentes ), y el valor es el mensaje
Subensamblaje
Los subcomponentes reciben a través de accesorios
<template>
<div>
<h1>父组件传递过来的值为：{
{
msg }}</h1>
</div>
</template>
<script>
export default {
props:['msg'],
}
</script>
pasar valor de hijo a padre
Los componentes secundarios comparten datos con los componentes principales mediante eventos personalizados. El código de ejemplo es el siguiente:
Subensamblaje
El componente secundario transmite datos al componente principal a través de this.$emit, aquí numchangeestá el nombre del método pasado al componente principal ( de manera similar, el campo debe ser consistente con el tiempo recibido ), y this.data es el valor que debe ser pasado al componente padre.
<script>
export default {
data(){
return{
data: '子组件穿入的数据',
}
},
methods:{
Transmit(){
this.$emit('numchange',this.data)
}
}
}
</script>
componente principal
El componente principal @numchangeactiva getNumchange a través del valor recibido, y val es el valor pasado desde el componente secundario (this.data)
<template>
<CommodityInfo @numchange='getNumchange'></CommodityInfo>
</template>
<script>
import CommodityInfo from "./components/CommodityInfo.vue";
export default {
components: {
CommodityInfo},
data(){
return{
numchange:''
}
},
methods:{
getNumchange(val){
this.numchange = val
}
}
}
</script>