Cocolib

Appearance

On this page

父子组件传参 ​

1、父传子）（ ​

父组件传参：

vue
<template>
    <div class="layout">
        <Menu  title="我是标题"></Menu>  	//给Menu组件 传递了一个title 字符串类型是不需要v-bind
        <Menu  v-bind:data="data"></Menu>  //传递非字符串类型需要加v-bind
        <div class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>

子组件接收：

js
//ts方式
defineProps<{			// defineProps是无须引入的直接使用即可
    title:string,
    data:number[]
}>()

type Props = { 			// TS 特有的默认值方式
    title?: string,
    data?: number[]
}
//withDefaults是个函数也是无须引入，接受一个props函数，第二个参数是一个对象设置默认值
withDefaults(defineProps<Props>(), { 	
    title: "张三",
    data: () => [1, 2, 3]
})

//js方式
defineProps({
    title:{
        default:"",
        type:string
    },
    data:Array
})

2、子传父 ​

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

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

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'])
 
const emit = defineEmits<{				//如果用了ts可以用这种方式
     (e: "on-click", name: string): void
}>()
    
const clickTap = () => {
    emit('on-click', list)
}
 
</script>

父组件接受子组件的事件

vue
<template>
    <div class="layout">
        //从Menu 组件接受子组件派发的事件on-click 后面是我们自己定义的函数名称getList
        <Menu @on-click="getList"></Menu>	
        <div class="layout-right">
            <Header></Header>
            <Content></Content>
        </div>
    </div>
</template>
 
<script setup lang="ts">
import Menu from './Menu/index.vue'
import Header from './Header/index.vue'
import Content from './Content/index.vue'
import { reactive } from 'vue';
 
const data = reactive<number[]>([1, 2, 3])
 
const getList = (list: number[]) => {
    console.log(list,'父组件接受子组件');
}
</script>

3、子组件暴露给父组件内部属性 ​

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

vue
<MenuCom ref="refMenu"></MenuCom>
//这样获取是有代码提示的
<script setup lang="ts">
import MenuCom from '../xxxxxxx.vue'
//注意这儿的typeof里面放的是组件名字(MenuCom)不是ref的名字 ref的名字对应开头的变量名(refMenu)
const refMenu = ref<InstanceType<typeof MenuCom>>()
//调用
refMenu.value.属性名
</script>

子组件的属性可以通过 defineExpose暴露

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