父组件通过 v-bind 绑定一个数据，然后子组件通过 defineProps 接受传过来的值，
如以下代码
给 Menu 组件 传递了一个 title 字符串类型是不需要 v-bind
1
2
3
4
5
6
7
8
9
| <template>
<div class="layout">
<Menu title="我是标题"></Menu>
<div class="layout-right">
<Header></Header>
<Content></Content>
</div>
</div>
</template>
|
传递非字符串类型需要加 v-bind 简写 冒号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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>
|
子组件接受值
通过 defineProps 来接受 defineProps 是无须引入的直接使用即可
如果我们使用的 TypeScript
可以使用传递字面量类型的纯类型语法做为参数
如 这是 TS 特有的
1
2
3
4
5
6
7
8
9
10
11
12
| <template>
<div class="menu">
菜单区域 {{ title }}
<div>{{ data }}</div>
</div>
</template>
<script setup lang="ts">
defineProps<{
title:string,
data:number[]
}>()
</script>
|
如果你使用的不是 TS
1
2
3
4
5
6
7
| defineProps({
title: {
default: "",
type: string,
},
data: Array,
});
|
TS 特有的默认值方式
withDefaults 是个函数也是无须引入开箱即用接受一个 props 函数第二个参数是一个对象设置默认值
1
2
3
4
5
6
7
8
9
| type Props = {
title?: string,
data?: number[]
}
withDefaults(defineProps<Props>(), {
title: "张三",
data: () => [1, 2, 3]
})
|
子组件给父组件传参
是通过 defineEmits 派发一个事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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 clickTap = () => {
emit('on-click', list)
}
</script>
|
我们在子组件绑定了一个 click 事件 然后通过 defineEmits 注册了一个自定义事件
点击 click 触发 emit 去调用我们注册的事件 然后传递参数
父组件接受子组件的事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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
会把参数返回过来
子组件暴露给父组件内部属性
通过 defineExpose
我们从父组件获取子组件实例通过 ref
1
2
| <Menu ref="menus"></Menu>;
const menus = ref(null);
|
然后打印 menus.value 发现没有任何属性
这时候父组件想要读到子组件的属性可以通过 defineExpose 暴露
1
2
3
4
| const list = reactive<number[]>([4, 5, 6])
defineExpose({
list
})
|
这样父组件就可以读到了
