ホームページ >ウェブフロントエンド >Vue.js >vue3のsetup関数の戻り値について話しましょう
setup
は vue3 の新しい設定項目です。 value は関数、コンポーネントで使用するデータ、メソッドなどをセットアップで構成する必要があります。 [関連する推奨事項: vue.js ビデオ チュートリアル ]
setup 関数の戻り値は 2 つあります
1 1 つを返します。 レンダリング関数 を返します。レンダリング コンテンツをカスタマイズできます (あまり使用されませんが、理解してください)
import {h} from 'vue'...setup() { ... return () => h('h1','学习')}
2。 オブジェクト 、プロパティとメソッドを返しますオブジェクト内の
はテンプレート内で見つけることができます
methods: { test1() { console.log(this.sex); console.log(this.sayHello); }},setup() { const sex = ref('女') function sayHello() { alert('你好啊') } return { sex, sayHello }}
data() { return { sex:'男' }},methods: { sayHello() { alert('你好啊') }},setup() { function test2() { console.log(this.sex); console.log(this.sayHello); } return { test2 }}
data() { return { sex:'男' }},setup() { const sex = ref('女') return { sex }}
注:
(1) vue2 と vue3
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:['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 サイトの他の関連記事を参照してください。