setup函数的返回值有几种,使用要注意什么
一、概念:
setup
是vue3中的一个新的配置项,值为一个函数,我们在组件中用到的数据、方法等等,都要配置在setup中。
二、详解:
setup函数的返回值有两种
1、返回一个渲染函数,可以自定义渲染内容(用得不多,了解即可)
import {
h}
from 'vue'...setup() {
...
return () =>
h('h1','学习')}
登录后复制
2、返回一个对象,对象中的属性和方法在模板中可以直接使用
(1)在vue2的配置中可读取到vue3配置中的属性和方法
methods: {
test1() {
console.log(this.sex);
console.log(this.sayHello);
}
}
,setup() {
const sex = ref('女')
function sayHello() {
alert('你好啊')
}
return {
sex,
sayHello }
}
登录后复制
(2)在vue3的配置中不能读取vue2配置中的属性和方法
data() {
return {
sex:'男'
}
}
,methods: {
sayHello() {
alert('你好啊')
}
}
,setup() {
function test2() {
console.log(this.sex);
console.log(this.sayHello);
}
return {
test2 }
}
登录后复制
(3)如果vue2和vue3的配置有冲突,则vue3的setup优先
data() {
return {
sex:'男'
}
}
,setup() {
const sex = ref('女')
return {
sex }
}
登录后复制
注意点:
(1)vue2和vue3的配置尽量不要混用
(2)setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)
三、两个注意点
1、setup执行的时机
在beforeCreate之前执行一次,this是undefined。
beforeCreate(){
console.log('beforeCreate');
}
,setup(){
console.log('setup',this);
}
登录后复制
2、setup的参数
1、props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
在父组件中给子组件传递数据
Demo msg="你好啊" name="tom" />
登录后复制
在子组件中接收
props:['msg','name'], // 需要声明一下接受到了,否则会报警告setup(props){
console.log(props)}
登录后复制
并且接收到的数据被包装成一个代理对象,能够实现响应式。
2、context:上下文对象1、attrs
: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于 this.$attrs
。
父子组件通信过程中,父组件把数据传递过来,如果子组件没有用props进行接收,就会出现在attrs中,而vm中没有
如果用props接收了,则会出现在vm上而attrs中没有
props:['msg','name']
登录后复制
2、emit
: 分发自定义事件的函数, 相当于 this.$emit
。
在父组件中给子组件绑定一个事件
Demo @hello="showHelloMsg">
登录后复制
在子组件中触发事件并且可以传值过去
emits:['hello'], // 要声明接收到了hello事件,否则会报警告context.emit('hello',666)
登录后复制
3、slots
: 收到的插槽内容, 相当于 this.$slots
。
Demo>
template v-slot:qwe>
span>
你好/span>
/template>
/Demo>
登录后复制
vue3里面具名插槽用v-slot:
通过以上内容的阐述,相信大家对“setup函数的返回值有几种,使用要注意什么”已经有了进一步的了解,更多相关的问题,欢迎关注网络或到官网咨询客服。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: setup函数的返回值有几种,使用要注意什么
本文地址: https://pptw.com/jishu/652470.html