Mari kita bincangkan tentang nilai pulangan fungsi persediaan dalam vue3

1 Konsep:

setup ialah item konfigurasi baharu dalam vue3, dengan nilai satu. Fungsi, data, kaedah, dsb. yang kami gunakan dalam komponen mesti dikonfigurasikan dalam persediaan. [Cadangan berkaitan: tutorial video vue.js]

2. Penjelasan terperinci:

Terdapat dua nilai pulangan fungsi persediaan
1. Kembalikan satu Fungsi Rendering , anda boleh menyesuaikan kandungan rendering (tidak banyak digunakan, faham sahaja)

import {h} from 'vue'...setup() {
    ...
    return () => h('h1','学习')}

2. Kembalikan objek , sifat dan kaedah dalam objek berada dalam templat Boleh digunakan terus dalam
(1) Sifat dan kaedah dalam konfigurasi vue3 boleh dibaca dalam konfigurasi vue2

methods: {
	test1() {
		console.log(this.sex);
		console.log(this.sayHello);
	}},setup() {
	const sex = ref('女')
	function sayHello() {
		alert('你好啊')
	}
	return {
		sex,
		sayHello	}}

(2 ) Ia tidak boleh dibaca dalam konfigurasi vue3 Baca sifat dan kaedah dalam konfigurasi vue2

data() {
	return {
		sex:'男'
	}},methods: {
	sayHello() {
		alert('你好啊')
	}},setup() {
	function test2() {
		console.log(this.sex);
		console.log(this.sayHello);
	}
	return {
		test2	}}

(3) Jika terdapat konflik antara konfigurasi vue2 dan vue3, persediaan vue3 diutamakan

data() {
	return {
		sex:'男'
	}},setup() {
	const sex = ref('女')
	return {
		sex	}}

Nota:
(1) Cuba jangan mencampurkan konfigurasi vue2 dan vue3
(2) Persediaan tidak boleh menjadi fungsi async kerana ia mengembalikan Nilai bukan lagi objek pulangan, tetapi janji, dan templat tidak dapat melihat sifat dalam objek pulangan. (Anda juga boleh mengembalikan contoh Promise kemudian, tetapi ia memerlukan kerjasama Suspense dan komponen tak segerak)

3 Dua perkara yang perlu diperhatikan

1 Masa pelaksanaan persediaan

sebelumCreate Dilaksanakan sekali sebelum ini, ini tidak ditentukan.

beforeCreate(){
	console.log('beforeCreate');},setup(){
	console.log('setup',this);}

2. Tetapkan parameter

1: Nilai ialah objek, termasuk: yang dihantar dari luar komponen, Dan sifat yang diterima diisytiharkan di dalam komponen. Hantar data kepada komponen anak dalam komponen induk

<demo></demo>

Terima dalam komponen anak

props:['msg','name'], // 需要声明一下接受到了，否则会报警告setup(props){
	console.log(props)}

dan data yang diterima dibungkus ke dalam Objek proksi boleh melaksanakan tindak balas.

2. konteks: Objek konteks
: Nilai ialah objek, termasuk: atribut yang dihantar dari luar komponen tetapi tidak diisytiharkan dalam konfigurasi props, bersamaan dengan 1、attrs. this.$attrs

Semasa proses komunikasi antara komponen ibu bapa dan anak, komponen induk menghantar data Jika komponen anak tidak menggunakan prop untuk menerimanya, ia akan muncul dalam attrs, tetapi tiada

dalam vm. Jika ia digunakan Jika prop diterima, ia akan muncul pada vm tetapi tiada

props:['msg','name']

dalam attrs: fungsi yang mengedarkan acara tersuai, bersamaan dengan
. 2、emit Ikat acara kepada komponen anak dalam komponen induk this.$emit

Cetuskan acara dalam komponen anak dan lulus nilai

<demo></demo>

emits:['hello'], // 要声明接收到了hello事件，否则会报警告context.emit('hello',666)

: Kandungan Slot yang Diterima , bersamaan dengan

. 3、slotsthis.$slots

Vue3 menggunakan v-slot untuk slot bertopeng:

<demo>
	<template>
		<span>你好</span>
	</template></demo>

Atas ialah kandungan terperinci Mari kita bincangkan tentang nilai pulangan fungsi persediaan dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!