vue3_父子组件传参

最近在看b站 小满zs 的vue3教程，巩固一下。

1.父–>子组件

• 父组件自定义一个属性，用v-bind 绑定在子组件上

<!-- 父组件 -->
<template>
  <div class="container">
    <child :par_info="par_info" :list="list"></child>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import child from './child.vue'
const par_info = ref<string>('我是父组件传给子组件的值！')
const list = reactive<number[]>([100,200,300])
</script>

• 子组件通过defineProps接收

<!-- 子组件 -->
<template>
  <div class="container">
    父---子：{{par_info+'---------'+list}}
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
/* 1.子组件接收父组件参数一般写法 */
const props = defineProps({
    par_info:{
        default:'父组件没传,我默认的',
        type:String
    },
    list:Array
})
/* 2.ts特有写法
    withDefaults:定义父组件传过来的参数的默认值
 */
// const props = withDefaults(
//     defineProps<{
//     par_info:string,
//     list:Array<number>
// }>(),{
//     par_info:'父组件没传,我默认的',
//     list:()=>[]
// }
// )
onMounted(()=>{
    console.log(par_info);//代码中直接这样取会报错【找不到名称“par_info”】，需要用下面这种方式
    console.log(props.par_info);
})

2.子–>父

• 子组件通过defineEmits派发一个事件

<!-- 子组件 -->
<template>
  <div class="container">
    <el-button @click="tap">派发给父组件</el-button>
    <el-button @click="tap2">派发给父组件2</el-button>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
/* 1.子组件传值给父组件一般写法 */
const emit = defineEmits(['toParent','toParent2'])
/* 2.ts特有写法 */
// const emit = defineEmits<{
//     (e:'toParent',name:string):void;
//     (e:'toParent2',name:string):void;
// }>()
const tap = ()=>{
    emit('toParent','我是子组件传给父组件的参数')
}
const tap2 = ()=>{
    emit('toParent2','我是子组件传给父组件的参数2')
}
</script>

• 父组件接收子组件的事件

<!-- 父组件 -->
<template>
  <div class="container">
    <child @to-parent="fromChild" @to-parent2="fromChild2"></child>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import child from './child.vue'
const fromChild = (val:string) => {
    console.log(val);
}
const fromChild2 = (val:string) => {
    console.log(val);
}
</script>

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

• 子组件：

const exposeList = reactive<number[]>([1,2,3])
defineExpose({exposeList})

• 父组件

<template>
  <div class="container">
    <child ref="childRef"></child>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onBeforeMount, onMounted} from 'vue'
import child from './child.vue'
const childRef = ref<InstanceType<typeof child>>()
onMounted(()=>{
    console.log(childRef.value?.exposeList);
})