prefacio
1. Pasar el valor del componente principal al componente secundario → a través del enlace de datos
2. El componente hijo pasa el valor al componente padre → a través del evento
1. Pasar valor del componente principal al componente secundario
Realizado por props, es decir: el componente hijo recibe el valor pasado por el componente padre a través de props
lograr
En el componente principal:
1. Introducir subcomponentes
2. Registrar subcomponentes
3. Cargue en forma de etiquetas, use enlace de datos para pasar valores
En el subcomponente:
1. Recibir el valor pasado del componente principal a través de props
Código de demostración específico
Componente principal: index.vue
<template>
<comA :list="listData"></comA>
</template>
<script>
import comA from '@/components/comA.vue'
export default{
components:{comA},
data(){
return{
listData:[
{"name": "刘", "age": "12"},
{"name": "肖", "age": "20"}
]
}
}
}
</script>Subcomponente: comA.vue
<template>
<view>
<block v-for="(item,index) in list" :key="index">
<view class="flex">
<text>{
{item.name}}</text>
<text>{
{item.age}}</text>
</view>
</block>
</view>
</template>
<script>
export default {
name: "comA",
props:{
list:{
type: [Array],
default: []
}
},
data() {
return {}
},
}
</script>En segundo lugar, el componente secundario pasa el valor al componente principal.
Realizado por props, es decir: el componente hijo recibe el valor pasado por el componente padre a través de props
lograr
En el componente principal:
1. Introducir subcomponentes
2. Registrar subcomponentes
3. Cargue en forma de etiquetas, use enlace de datos para pasar valores
4. Registrar función de subcomponente
En el subcomponente:
1. Pase el valor al componente principal a través de la función $emit()
Código de demostración específico
Componente principal: index.vue
<template>
<comA @ChildClick="childClick"></comA>
</template>
<script>
import comA from '@/components/comA.vue'
export default{
components:{comA},
methods:{
childClick(e){
console.log(e)
}
}
}
</script>Subcomponente: comA.vue
<template>
<view @click="sendValue"></view>
</template>
<script>
export default {
name:"comA",
props:{},
methods:{
sendValue: function(){
// 向父组件传值
this.$emit("childClick","我来自子组件")
},
}
}
</script>