setup
ist ein neues Konfigurationselement in vue3, der Wert ist eine Funktion, die Daten, Methoden usw., die wir in der Komponente verwenden, Alle muss im Setup konfiguriert werden. [Verwandte Empfehlungen: vue.js Video-Tutorial] setup
是vue3中的一个新的配置项,值为一个函数,我们在组件中用到的数据、方法等等,都要配置在setup中。【相关推荐:vue.js视频教程】
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和异步组件的配合)
在beforeCreate之前执行一次,this是undefined。
beforeCreate(){ console.log('beforeCreate');},setup(){ console.log('setup',this);}
1、props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
在父组件中给子组件传递数据
<demo></demo>
在子组件中接收
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></demo>
在子组件中触发事件并且可以传值过去
emits:['hello'], // 要声明接收到了hello事件,否则会报警告context.emit('hello',666)
3、slots
: 收到的插槽内容, 相当于 this.$slots
Die Setup-Funktion hat zwei Rückgabewerte
<demo> <template> <span>你好</span> </template></demo>
1. Der Wert ist ein Objekt, einschließlich: Attribute, die von außerhalb der Komponente übergeben, aber nicht in den Requisiten deklariert wurden Konfiguration, äquivalent zu <code>this.$attrs
. 🎜🎜Während des Kommunikationsprozesses zwischen der übergeordneten und der untergeordneten Komponente übergibt die übergeordnete Komponente die Daten. Wenn die untergeordnete Komponente keine Requisiten verwendet, um sie zu empfangen, werden sie in attrs angezeigt, jedoch nicht in der VM2. emit
: Eine Funktion, die benutzerdefinierte Ereignisse verteilt, äquivalent zu this.$emit
. 3.
: Der empfangene Slot-Inhalt. Entspricht this.$slots
. 🎜rrreee🎜Verwenden Sie den V-Slot für den maskierten Slot in vue3:🎜Das obige ist der detaillierte Inhalt vonLassen Sie uns über den Rückgabewert der Setup-Funktion in vue3 sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!