1. setup
1.1 基本使用
- 理解:Vue3.0中一个新的配置项,值为一个函数
- setup是所有Composition API的基础。组件中所用到的数据、方法等,都要配置在setup中
- setup函数的两种返回值:
- 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用
- 若返回一个渲染函数:则可以自定义渲染内容。则页面只显示渲染函数返回的内容,不会显示template中的内容
- 可以使用data、methods定义数据和方法。但尽量不要与Vue2配置混用,因为:
- Vue2配置(data、methos、computed等)可以访问到setup中的属性、方法
- 但在setup中不能访问到Vue2配置(data、methos、computed等)
- 如果Vue3和Vue2有重名, 谁在后面以谁为准
- setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到promise中的属性(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)
使用示例:App.vue
<template>
<h2>姓名:{
{name}}</h2>
<h2>年龄:{
{age}}</h2>
<button @click="sayHello">点我say hello</button>
</template>
<script>
// 导入渲染函数
// import {h} from 'vue'
export default {
name: 'App',
// 此处只是测试一下setup,暂时不考虑响应式的问题
setup() {
// 数据
let name = 'lily'
let age = 18
// 方法
function sayHello(){
alert(`我叫${name},我${age}岁了`)
}
// 返回方式一: 返回一个对象
return {
name,
age,
sayHello
}
// 返回方式二: 返回一个渲染函数
// return ()=> h('h1','第一中学')
}
}
</script>
页面效果如下。Vue开发者工具setup中的数据和函数分开显示的
1.2 两个注意点
- setup执行的时机:在beforeCreate之前执行一次,setup中的this是undefined
- setup的参数
- props:需要先在子组件内声明接收,然后再传递给setup
- context:上下文对象
- attrs: 子组件临时保存props未接收的值。相当于this.$attrs
- emit: 在子组件触发父组件传递过来的自定义事件,相当于this.$emit。需要先在子组件用emits进行接收
- slots: 收到的插槽内容, 相当于this.$slots
使用示例:
App.vue
- 向子组件传递自定义事件函数
- 向子组件传递props数据