父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值，
如以下代码
给Menu组件 传递了一个title 字符串类型是不需要v-bind
<template> <div class="layout"> <Menu title="我是标题"></Menu> <div class="layout-right"> <Header></Header> <Content></Content> </div> </div> </template>
传递非字符串类型需要加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>
子组件接受值
通过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 })
TS 特有的默认值方式
withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值
type Props = { title?: string, data?: number[] } withDefaults(defineProps<Props>(), { title: "张三", data: () => [1, 2, 3] })
子组件给父组件传参
是通过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
会把参数返回过来
子组件暴露给父组件内部属性
通过defineExpose
我们从父组件获取子组件实例通过ref
<Menu ref="refMenu"></Menu> //这样获取是有代码提示的 <script setup lang="ts"> import MenuCom from '../xxxxxxx.vue' //注意这儿的typeof里面放的是组件名字(MenuCom)不是ref的名字 ref的名字对应开头的变量名(refMenu) const refMenu = ref<InstanceType<typeof MenuCom>>() </script>
然后打印menus.value 发现没有任何属性
这时候父组件想要读到子组件的属性可以通过 defineExpose暴露
const list = reactive<number[]>([4, 5, 6]) defineExpose({ list })
这样父组件就可以读到了
案例封装瀑布流组件
父组件
<template> <waterFallVue :list="list"></waterFallVue> </template> <script setup lang='ts'> import { ref, reactive } from 'vue' import waterFallVue from './components/water-fall.vue'; const list = [ { height: 300, background: 'red' }, { height: 400, background: 'pink' }, { height: 500, background: 'blue' }, { height: 200, background: 'green' }, { height: 300, background: 'gray' }, { height: 400, background: '#CC00FF' }, { height: 200, background: 'black' }, { height: 100, background: '#996666' }, { height: 500, background: 'skyblue' }, { height: 300, background: '#993366' }, { height: 100, background: '#33FF33' }, { height: 400, background: 'skyblue' }, { height: 200, background: '#6633CC' }, { height: 300, background: '#666699' }, { height: 300, background: '#66CCFF' }, { height: 300, background: 'skyblue' }, { height: 200, background: '#CC3366' }, { height: 200, background: '#CC9966' }, { height: 200, background: '#FF00FF' }, { height: 500, background: '#990000' }, { height: 400, background: 'red' }, { height: 100, background: '#999966' }, { height: 200, background: '#CCCC66' }, { height: 300, background: '#FF33FF' }, { height: 400, background: '#FFFF66' }, { height: 200, background: 'red' }, { height: 100, background: 'skyblue' }, { height: 200, background: '#33CC00' }, { height: 300, background: '#330033' }, { height: 100, background: '#0066CC' }, { height: 200, background: 'skyblue' }, { height: 100, background: '#006666' }, { height: 200, background: 'yellow' }, { height: 300, background: 'yellow' }, { height: 100, background: '#33CCFF' }, { height: 400, background: 'yellow' }, { height: 400, background: 'yellow' }, { height: 200, background: '#33FF00' }, { height: 300, background: 'yellow' }, { height: 100, background: 'green' } ] </script> <style lang='less'> #app, html, body { height: 100%; } * { padding: 0; margin: 0; } </style>
子组件
<template> <div class="wraps"> <div :style="{height:item.height+'px',background:item.background,top:item.top+'px',left:item.left + 'px'}" v-for="item in waterList" class="items"></div> </div> </template> <script setup lang='ts'> import { ref, reactive, onMounted } from 'vue' const props = defineProps<{ list: any[] }>() const waterList = reactive<any[]>([]) const init = () => { const heightList: any[] = [] const width = 130; const x = document.body.clientWidth const column = Math.floor(x / width) for (let i = 0; i < props.list.length; i++) { if (i < column) { props.list[i].top = 10; props.list[i].left = i * width; heightList.push(props.list[i].height + 10) waterList.push(props.list[i]) } else { let current = heightList[0] let index = 0; heightList.forEach((h, inx) => { if (current > h) { current = h; index = inx; } }) console.log(current,'c') props.list[i].top = (current + 20); console.log(props.list[i].top,'top',i) props.list[i].left = index * width; heightList[index] = (heightList[index] + props.list[i].height + 20); waterList.push(props.list[i]) } } console.log(props.list) } onMounted(() => { window.onresize = () => init() init() }) </script> <style scoped lang='less'> .wraps { position: relative; height: 100%; .items { position: absolute; width: 120px; } } </style>
