常州微信网站建设流程,本地主机做网站服务器,国外网站平台,漳州专业做网站父组件通过v-bind#xff08;简写 :#xff09;绑定一个数据#xff0c;然后子组件通过defineProps接受传过来的值。
给Menu组件 传递了一个title 字符串类型是不需要v-bind
templatediv classlayoutMenu title我是标题…父组件通过v-bind简写 :绑定一个数据然后子组件通过defineProps接受传过来的值。
给Menu组件 传递了一个title 字符串类型是不需要v-bind
templatediv classlayoutMenu title我是标题/Menu/div
/template传递非字符串类型需要加v-bind :
templatediv classlayoutMenu :datadata title我是标题/Menu/div
/templatescript setup langts
import Menu from ./Menu/index.vue
import { reactive } from vue;
const data reactivenumber[]([1, 2, 3])
/script子组件接受值
通过defineProps 来接受 注意defineProps是无须引入的直接使用即可
如果使用的是TS
templatediv classmenu菜单区域 {{ title }}div{{ data }}/div/div
/templatescript setup langts
defineProps{title:string,data:number[]
}()
/script如果使用的不是TS
defineProps({title:{default:,type:string},data:Array
})TS 特有的默认值方式
withDefaults是个函数也是无须引入可以直接使用第一个参数接收一个props函数、第二个参数是一个对象设置默认值
type Props {title?: string,data?: number[]
}
withDefaults(definePropsProps(), {title: 张三,data: () [1, 2, 3]
})子组件给父组件传参
是通过defineEmits派发一个事件
templatediv classmenubutton clickclickTap派发给父组件/button/div
/templatescript setup langts
import { reactive } from vue
const list reactivenumber[]([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 去调用我们注册的事件 然后传递参数
父组件接受子组件的事件
templatediv classlayoutMenu on-clickgetList/Menu/div
/templatescript setup langts
import Menu from ./Menu/index.vue
import { reactive } from vue;
const data reactivenumber[]([1, 2, 3])
const getList (list: number[]) {console.log(list,父组件接受子组件);
}
/script子组件暴露给父组件内部属性,通过defineExpose,从父组件获取子组件实例通过ref
Menu refrefMenu/Menu!!!注意此处的ref不需要写成:ref
script setup langts
import MenuCom from ../xx.vue
//注意这儿的typeof里面放的是组件名字(MenuCom)不是ref的名字 ref的名字对应开头的变量名(refMenu)
//为了获取 MenuCom 的类型我们首先需要通过 typeof 得到其类型再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型
const refMenu refInstanceTypetypeof MenuCom | null(null)
/script控制台打印menus.value 发现没有任何属性
这时候父组件想要读到子组件的属性可以通过 defineExpose暴露
const list reactivenumber[]([4, 5, 6])defineExpose({list
})这样父组件就可以访问到自组件内部的属性或者方法了
