09 vue3之组件传参

父组件往son子组件传值

<template>
  <son2 :title="'父组件传来的title'"></son2>
</template>

子组件接收值

通过defineProps 来接受 defineProps是无须引入的直接使用即可

如果我们使用的TypeScript lang=‘ts'

可以使用传递字面量类型的纯类型语法做为参数

如 这是TS特有的

<template>
  <div class="">我是son子组件----</div>
  <h1>{{ title }}</h1>
  <h1>{{ arr }}</h1>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

// 使用的js 没使用lang="ts"
/* const props = defineProps({
  title: {
    type: String,
    default: "我是默认值",
  },
}); */
// 使用了lang="ts"
/* const props = defineProps<{
  title: string;
}>();
console.log(props.title); */
</script>

<style lang="sass" scoped></style>

 TS 特有的默认值方式

withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值

withDefaults(
  defineProps<{
    title: string;
    arr: number[];
  }>(),
  {
    // withDefaults 组件默认值的情况，
    arr: () => ["666"],
  }
);

子组件给父组件传参

是通过defineEmits派发一个事件

我们在子组件绑定了一个click 事件 然后通过defineEmits 注册了一个自定义事件

点击click 触发 emit 去调用我们注册的事件 然后传递参数

子组件menu.vue

<template>
    <div class="menu">
        <button @click="clickTap">派发给父组件</button>
    </div>
</template>
 
<script setup lang="ts">
import { reactive } from 'vue'
const list = reactive<number[]>([4, 5, 6])
 
const emit = defineEmits(['on-click'])
 
//如果用了ts可以这样两种方式
// const emit = defineEmits<{
//     (e: "on-click", name: string): void
// }>()
const clickTap = () => {
    emit('on-click', list)
}
 
</script>

父组件

<template>
    <div class="layout">
        <Menu @on-click="getList"></Menu>
    </div>
</template>
 
<script setup lang="ts">
import Menu from './Menu/index.vue'
import { reactive } from 'vue';
 
const data = reactive<number[]>([1, 2, 3])
 
const getList = (list: number[]) => {
    console.log(list,'父组件接受子组件');
}
</script>

从Menu 组件接受子组件派发的事件on-click 后面是我们自己定义的函数名称getList

会把参数返回过来

子组件defineExpose暴露给父组件内部属性

子组件通过defineExpose暴露属性

const list = reactive<number[]>([4, 5, 6])
 
defineExpose({
    list
})

我们从父组件获取子组件实例通过ref

<Menu ref="menu "></Menu>
<script setup lang="ts">
import sonfrom '../xxxxxxx.vue'
//注意这儿的typeof里面放的是组件名字(son)不是ref的名字 ref的名字对应开头的变量名(menu)
const menu = ref<InstanceType<typeof son>>();
onMounted(() => {
  console.log(menu.value.test); //在onMounted才能打印，setup执行在onMounted之前类似created
  console.log(menu.value?.open());
});
</script>