Vue3 父子组件数据传递

1、父组件向子组件传递数据

1.1、传递多个简单变量给到子组件

父组件使用

  <TitleView title="标题" :name="name" :isCollect="isCollect" @collect-event="collectEvent" /><script setup>const name = ref('名字')const isCollect = ref(true)</script>

子组件接收并且向外暴露一个方法

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'const props = defineProps<{ title: string; name: string; isCollect: boolean }>()
const emits = defineEmits(['collectEvent'])
const isCollectRef = ref(props.isCollect)function doCollect() {isCollectRef.value = !isCollectRef.valueemits('collectEvent', isCollectRef.value)
}
</script>

1.2、传递对象给到子组件

父组件传递

<IndicatorDetail :detail="detailIndex"/>
<script setup>
const detailIndex = reactive([{text:'未知',title:'X',color:'green'
},{text:'未知',title:'Y',color:'blue'
},{text:'2023-08-13',title:'Z',color:'grey'
}])
</script>

子组件直接通过props接收

<script>
export default {props: ['detail'],setup(props) {}
}
</script>
或者
<script setup>
const props = defineProps({detail: {type: Object,default: () => {return {}}}
})
</script>