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.value
emits('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>