编辑
2023-04-04
VUE3
0
请注意,本文编写于 619 天前,最后修改于 611 天前,其中某些信息可能已经过时。

目录

setup函数
说明
setup参数
第一个参数属性props
第二个参数context
setup函数的返回值
对象形式
函数
说明
语法
Eg

setup函数

说明

setup是一个专门用于组合式 API 的特殊钩子函数,可以理解为一个生命周期函数,在beforeCreate之前。 vue3中代替beforeCerate、created; 在setup中直接声明变量,此变量并不会是响应式的;且setup中必须有返回值

1、无法访问组件中的数据和方法,无法获取this 2、在data和methods中可以访问setup中的数据或方法,反之在setup中无法获取data和methods中的数据或方法

setup参数

第一个参数属性props

typescript
<template> <h1 @click="cat">hello组件</h1> </template> <script> export default { name:'HelloWordVue', props:['msg'], setup(props){ function cat(){ console.log('1',props)//1 Proxy {msg: '测试msg'} } return{ cat, } } } </script> <style> </style>

第二个参数context

context

  1. 通过context.emit()触发自定义事件
  • 父组件
<template> <!-- 模板中不需要添加.value,程序会自动处理 --> <p @click="addnum">{{ a }}</p> <hello-word-vue msg="测试msg" @myfn="addnum" /> </template> <script> import { ref } from "vue"; import HelloWordVue from "./components/HelloWord.vue"; export default { name: "App", setup() { let a = ref(0); function addnum() { console.log("a", a); /* console.log a RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 0, _value: 0} dep: Set(1) [[Entries]] n: 0 w: 0 size: 1 [[Prototype]]: Set __v_isRef: true __v_isShallow: false _rawValue: 1 _value: 1 value: 1 [[Prototype]]: Object */ // 需要通过.value形式获取到响应式数据,在此基础上操作 a.value++; } return { a, addnum, }; }, components: { HelloWordVue, }, }; </script> <style></style>
  • 子组件
ts
<template> <h1>hello组件</h1> </template> <script> export default { name: "HelloWordVue", props: ["msg"], setup(props, context) { console.log(context); function cat() { context.emit("myfn") } return { cat, }; }, }; </script> <style></style>
  1. 若子组件中没有props接受属性,则context.attrs会接受传入的属性 attrs
ts
<template> <h1>hello组件</h1> </template> <script> export default { name: "HelloWordVue", // props: \["msg"], setup(props, context) { console.log(context); function cat() { context.emit("myfn") } return { cat, }; }, }; </script> <style></style>
  1. 获取插槽内的内容

通过context.slots.before()获取插槽的内容

ts
<template> <h1>hello组件</h1> </template> <script> export default { name: "HelloWordVue", props: ["msg"], setup(props, context) { console.log(context); console.log(context.slots.before()) function cat() { context.emit("myfn") } return { cat, }; }, }; </script> <style></style>

slots

setup函数的返回值

对象形式

对象内是自定义的数据

函数

说明

返回一个函数(渲染函数),可以自定义渲染内容;优先级更高,会覆盖template的内容

语法
ts
import {h} from 'vue'; setup(){ return ()=>h(渲染的html标签,渲染的内容) }
Eg
ts
<template> <p>测试</p> </template> <script> import {h} from 'vue'; export default { name: 'App', setup(){ return ()=>h("h1","我是h1标签") } } </script> <style> </style>

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!