父子组件传参

子组件中直接使用defineProps 来默认接收父组件传过来的参数

1
2
3
4
5
type Props = {
  name:string,
  content:string
}
defineProps<Props>() // 范型中定义的属性可以直接在子组件中使用

withDefault方法定义默认props参数,withDefault方法接收两个参数，第一个参数固定defineProps(),第二个参数是个对象，定义默认参数

1
2
3
4
5
6
7
8
9
10
11
<script setup lang="ts">
  type Props = {
    name?:string,
    content?:string,
    list?: () => [] // 复杂数据类型需要通过函数方式return出去，否则控制台会报错
  }
  withDefault(defineProps<Props>(),{
    name:'我是默认name',
    content:'我是默认content'
  })
</script>

defineEmits事件派发，子组件向父组件传递参数,子组件中定义事件

1
2
3
4
5
6
7
// 子组件
<script setup lang="ts">
  import { ref } from 'vue'
  const data = ref<number>(0)
  const emit = defineEmit(['on-click'])
  emit('on-click',data)
</script>

父组件绑定自定义事件并定义接收参数的方法

1
2
3
4
5
6
<Card @on-click="getItem"></Card>
<script setup lang="ts">
  const getItem = (i) => {
    console.log(i,'来自子组件的参数')
  }
</script>