如何引入子组件
<template>
<table1 />
</template>
<script lang="ts" setup>
import table1 from 'xxxx' //路径
</script>
父组件传参给子组件
父组件
<template>
<table1 :table1Data="table1Data" />
</template>
<script lang="ts" setup>
import table1 from 'xxxx'
import { ref } from 'vue'
const table1Data = ref([])
</script>
子组件
<template>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue'
const props = defineProps < {
table1Data: Array
} > ()
const { table1Data } = toRefs(props)
</script>
子组件如何给父组件传参
父组件
<template>
<table1 @changetable1="changetable1" />
</template>
<script lang="ts" setup>
import table1 from 'xxxx'
const changetable1 = (val) => {
//val是子组件的传参
}
</script>
子组件
<template>
<button @click="test()"></button>
</template>
<script lang="ts" setup>
const emit = defineEmits(['changetable1'])
const test = () => {
emit('changetable1', { type: 'test' })
}
</script>
父组件如何调用子组件的方法
父组件
<template>
<table1 ref="table1Ref" />
</template>
<script lang="ts" setup>
import table1 from 'xxxxx'
import { ref } from 'vue'
const table1Ref = ref(null)
table1Ref.value.test('hi')
</script>
子组件
<template>
</template>
<script lang="ts" setup>
const test = (val) => {
console.log(val);
}
defineExpose({ test })
</script>