哈尔滨app网站开发,表白网页生成器手机版,月嫂云商城网站建设,通过WordPress开发的主题文章目录 defineProps普通写法TS写法 defineEmits普通写法TS写法 defineExpose defineProps 和 defineEmits 都是只能在 script setup 中使用的编译器宏。他们不需要导入#xff0c;且会随着 script setup 的处理过程一同被编译掉。 defineProps 接收父组件传… 文章目录 defineProps普通写法TS写法 defineEmits普通写法TS写法 defineExpose defineProps 和 defineEmits 都是只能在 script setup 中使用的编译器宏。他们不需要导入且会随着 script setup 的处理过程一同被编译掉。 defineProps 接收父组件传递的参数 父页面
templatep父组件/pchild :numnum/child
/template子页面
templatep我是子组件接收的num:{{ num }}/p
/templatescript langts setup
let Props defineProps({num: {type: Number,default: 0,},
})
console.log(Props,Props,Props.num)
/script想在子组件中使用参数值需要用变量Props 接收defineProps。
使用的时候直接Props.num在html中直接使用num即可无需加上变量名称。
defineProps两种写法
普通写法
let Props defineProps({num: {type: Number,default: 0,},
})TS写法
defineProps{title:string,data:number[]
}()TS 特有的默认值方式withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值。
withDefaults(defineProps{title:string,data:number[]
}(),{title:张三,data()[1,2,3]
})defineEmits 子组件向父组件派发数据 父页面templatep父组件/pchild :numnum fnaddNum fn2paramsNum/child
/templatescript langts setupvue2需要使用component挂载组件vue3 不需要 引入就直接可以使用
import Child from ./child.vue
import { ref } from vuelet num ref(20) 子传父回调
let addNum () {num.value
} 子传父带参数
let paramsNum (id: any) {console.log(子传父带参数 id, id)
}
/script子页面templatep我是子组件接收的num:{{ num }}/pbutton clickaddadd/buttonbutton clickparameteradd带参数/button
/templatescript langts setup
let Props defineProps({num: {type: Number,default: 0,},
})
console.log(Props,Props,Props.num)
// 子传父 需要先定义好emit方法 这点区别比较大 然后调用let emit defineEmits{(event: fn): void(event: fn2, id: number): void
}()let add () {emit(fn)
}
let parameter () {emit(fn2, Props.num)
}
/scriptdefineEmits两种写法
普通写法
const emit defineEmits([fn,fn2])TS写法
let emit defineEmits{(event: fn): void(event: fn2, id: number): void
}()
//不带参数
let add () {emit(fn)
}
//带参数
let parameter () {emit(fn2, Props.num)
}defineExpose 使用 script setup 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例不会暴露任何在 script setup 中声明的绑定。 可以通过 defineExpose 编译器宏来显式指定在 script setup 组件中要暴露出去的属性。 通过defineExpose我们从父组件获取子组件实例通过ref
父组件MenuCom refrefMenu/MenuCom
//这样获取是有代码提示的
script setup langts
import MenuCom from ../xxxxxxx.vue
//注意这儿的typeof里面放的是组件名字(MenuCom)不是ref的名字 ref的名字对应开头的变量名(refMenu)
const refMenu refInstanceTypetypeof MenuCom()//打印子组件属性
console.log(refMenu.value.list )
/script这时候父组件想要读到子组件的属性可以通过 defineExpose暴露
子组件
const list reactivenumber[]([4, 5, 6])
defineExpose({list
})
