父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值，
1）给Menu组件 传递了一个title 字符串类型是不需要v-bind
<template> <div class="layout"> <Menu title="我是标题"></Menu> <div class="layout-right"> <Header></Header> <Content></Content> </div> </div> </template>
2）传递非字符串类型需要加v-bind 简写 冒号
<template> <div class="layout"> <Menu v-bind:data="data" title="我是标题"></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]) </script>
ps:lang="ts"使用的TypeScript
3）子组件接受值
通过defineProps 来接受 defineProps是无须引入的直接使用即可
如果我们使用的TypeScript
可以使用传递字面量类型的纯类型语法做为参数
如 这是TS特有的
<template> <div class="menu"> 菜单区域 {{ title }} <div>{{ data }}</div> </div> </template> <script setup lang="ts"> defineProps<{ title:string, data:number[] }>() </script>
如果你使用的不是TS
defineProps({ title:{ default:"", type:string }, data:Array })
4）默认值
TS 特有的默认值方式
withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值
type Props = { title?: string, data?: number[] } withDefaults(defineProps<Props>(), { title: "张三", data: () => [1, 2, 3] })
1)是通过defineEmits派发一个事件
<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>
我们在子组件绑定了一个click 事件 然后通过defineEmits 注册了一个自定义事件
点击click 触发 emit 去调用我们注册的事件 然后传递参数
父组件接受子组件的事件
<template>
<div class="layout">
<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>
我们从Menu 组件接受子组件派发的事件on-click 后面是我们自己定义的函数名称getList
会把参数返回过来
2)子组件暴露给父组件内部属性
通过defineExpose
我们从父组件获取子组件实例通过ref
父组件
<Menu ref="menus"></Menu> //这样获取是有代码提示的 const menus = ref<InstanceType<typeof menus>>()
然后打印menus.value 发现没有任何属性
这时候父组件想要读到子组件的属性可以通过 defineExpose暴露
ps:InstanceType 是ts自带的 <>泛型
子组件
const list = reactive<number[]>([4, 5, 6])
defineExpose({
list
})
这样父组件就可以读到了
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。