例: vue3 のセットアップ パラメーター attrs、slots、および Emit は何ですか?

このドキュメントを何度も読みましたが、それでも内容が理解できなかったので、理解を助けるために手動で例を作成しました:

home.vue

<template>
  <div class="home">
    <img src="/static/imghwm/default1.png"  data-src="../assets/logo.png"  class="lazy"  alt="Vue logo"  />
    <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 id="nbsp-msg-nbsp">{{ msg }}</h1>
    <span>这里是插槽内容：</span>
    <slot slotone="01" name="one"></slot>
    <slot slottwo="02" name="two"></slot>
    <hr />

    <button @click="$emit(&#39;custome&#39;, &#39;参数&#39;)">点击传递参数</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 つの結論が正しく理解されているかどうか知りたいです。 はほぼ正しいです。最初の点で少しだけ問題があります。

  context
はこのコンポーネントの実際のオブジェクトではなく、

setup

が実行されたときに情報の一部を持ってくるだけのものです。 ##setup

このコンポーネント オブジェクトはまだ作成されていません。

質問者がこれまでに Vue2 または Vue3 のオプション API の記述方法に触れたことがあるかどうかはわかりませんが、直接思いついた場合、Vue3 のコンポジション API は本当に理解するのが簡単ではありません。 最後の 3 つは実際には、オプション API の this.$attrs、this.$slots

、

this.$emit

です。 # #setup

のときに this がなかったので、このように書きました。 [関連する推奨事項: vue.js ビデオ チュートリアル ]

以上が例: vue3 のセットアップ パラメーター attrs、slots、および Emit は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。