Índice
compartilhamento de dados
No desenvolvimento diário, frequentemente encontramos o problema de transmissão de dados entre componentes. Em geral, a relação de transmissão de dados mais comumente usada entre essas duas relações é:
Os dois métodos de transmissão usam métodos diferentes, que serão analisados em detalhes a seguir.
Passar valor de pai para filho
Compartilhar dados de componentes pai para componentes filho requer o uso de propriedades personalizadas. O código de exemplo é o seguinte:
componente pai
O componente pai introduz o componente filho e o registra usando
<template>
<CommodityInfo :msg='message'></CommodityInfo>
</template>
<script>
import CommodityInfo from "./components/CommodityInfo.vue";
export default {
components: {
CommodityInfo},
data(){
return{
message:'父组件'
}
}
}
</script>
Ao :msg='message'passar message para CommodityInfo,
a msg aqui corresponde ao nome do método recebido pelo subcomponente ( então os campos devem ser consistentes ), e o valor é message
Submontagem
Subcomponentes recebem via props
<template>
<div>
<h1>父组件传递过来的值为：{
{
msg }}</h1>
</div>
</template>
<script>
export default {
props:['msg'],
}
</script>
passar valor de filho para pai
Componentes filhos compartilham dados com componentes pais usando eventos personalizados. O código de exemplo é o seguinte:
Submontagem
O componente filho transmite dados para o componente pai através de this.$emit, aqui numchangeestá o nome do método passado para o componente pai ( da mesma forma, o campo deve ser consistente com o recebido ), e this.data é o valor que precisa ser passado para o componente pai.
<script>
export default {
data(){
return{
data: '子组件穿入的数据',
}
},
methods:{
Transmit(){
this.$emit('numchange',this.data)
}
}
}
</script>
componente pai
O componente pai @numchangeaciona getNumchange por meio do valor recebido e val é o valor passado do componente filho (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>