vue3のsetup関数の戻り値について話しましょう

1. 概念:

setup は vue3 の新しい設定項目です。 value は関数、コンポーネントで使用するデータ、メソッドなどをセットアップで構成する必要があります。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

2. 詳細な説明:

setup 関数の戻り値は 2 つあります
1 1 つを返します。 レンダリング関数 を返します。レンダリング コンテンツをカスタマイズできます (あまり使用されませんが、理解してください)

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

2。 オブジェクト 、プロパティとメソッドを返しますオブジェクト内の
はテンプレート内で見つけることができます

を直接使用します (1) vue3 構成のプロパティとメソッドは vue2 構成で読み取ることができます

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

(2) vue2 vue3 設定では設定を読み取れません。

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

のプロパティとメソッド (3) vue2 と vue3 の設定に矛盾がある場合、vue3 の設定が優先されます

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

注:

(1) vue2 と vue3

の構成を混合しないようにしてください (2) セットアップは、 async 関数では、戻り値が戻りオブジェクトではなくなったため、promise の場合、テンプレートは戻りオブジェクトのプロパティを参照できません。 (後からPromiseインスタンスを返すこともできますが、Suspenseコンポーネントと非同期コンポーネントの連携が必要です)

3. 2つの注意点

1. セットアップ実行のタイミング

In beforeCreate 以前に一度実行されましたが、これは未定義でした。

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

2. パラメータの設定

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 がありません。 : カスタム イベントを配布する関数。this .$emit に相当します。
親コンポーネントの子コンポーネントにイベントをバインドする

<demo></demo>

子コンポーネントでイベントをトリガーし、値

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

3 を渡します。スロット: 受信スロットの内容は this.$slots と同等です。

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

vue3 のマスクされたスロットは v-slot を使用します:

以上がvue3のsetup関数の戻り値について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。