ホームページ >ウェブフロントエンド >Vue.js >例: vue3 のセットアップ パラメーター attrs、slots、および Emit は何ですか?
このドキュメントを何度も読みましたが、それでも内容が理解できなかったので、理解を助けるために手動で例を作成しました:
home.vue
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js App" proper="1" @custome="handler"> <template v-slot:one> {{ home }} - 子组件插槽的数据: </template> </HelloWorld> </div> </template> <script> import HelloWorld from "@/components/HelloWorld.vue"; export default { name: "Home", data() { return { home: "主页", }; }, components: { HelloWorld }, methods: { handler(args) { console.log("子组件传递的参数:", args); }, }, }; </script>
Helloworld.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> <span>这里是插槽内容:</span> <slot slotone="01" name="one"></slot> <slot slottwo="02" name="two"></slot> <hr /> <button @click="$emit('custome', '参数')">点击传递参数</button> </div> </template> <script> export default { name: "HelloWorld", props: { msg: String, }, setup(props, context) { console.log("props:", props); console.log("context:", context); const { attrs, slots, emit } = context; console.log("attrs:", attrs); console.log("slots:", slots); console.log("emit:", emit); }, }; </script>
コンソール出力:
props: Proxy {msg: "Welcome to Your Vue.js App"} context: {expose: ƒ} attrs: Proxy {proper: "1", __vInternal: 1, onCustome: ƒ} slots: Proxy {_: 1, __vInternal: 1, one: ƒ} emit: (event, ...args) => instance.emit(event, ...args)
展開を続ける:
図内の丸で囲まれた部分を結合します。 、おそらく結論は次のとおりです。
context
ここでのコンテキストは、helloworld
コンポーネント
を参照する必要があります。 attrs
はコンポーネントです。$attrs
(プロパティは含まれませんが、関数メソッドが含まれます)
slots
はコンポーネントです他のスロット「2」には対応するテンプレートがないため、これは「使用済み」スロットです。はコンポーネントです カスタム イベントとは正確には何ですか?ただし、ここでは実際にはコンソール出力から何も取得できません。
上記 4 つの結論が正しく理解されているかどうか知りたいです。 はほぼ正しいです。最初の点で少しだけ問題があります。
が実行されたときに情報の一部を持ってくるだけのものです。 ##setup
このコンポーネント オブジェクトはまだ作成されていません。質問者がこれまでに Vue2 または Vue3 のオプション API の記述方法に触れたことがあるかどうかはわかりませんが、直接思いついた場合、Vue3 のコンポジション API は本当に理解するのが簡単ではありません。
最後の 3 つは実際には、オプション API の
this.$attrs、
this.$slots
this.$emit
です。 # #setup のときに this
がなかったので、このように書きました。 [関連する推奨事項:
vue.js ビデオ チュートリアル
]
以上が例: vue3 のセットアップ パラメーター attrs、slots、および Emit は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。