VueのscopedSlotsjsxについて知っておくべきこと

あなたが知る必要があるVue.jsscopedSlots

scopedSlotsとslot-scopeの違いは何ですか？

• 同じ効果：両方ともスコープスロットです
• さまざまなシナリオ：slot-scope テンプレート文法、scopedSlots プログラム文法
• 別の使用： <template> で使用slot-scope、 render() 関数 で使用 scopedSlots

レンダリング機能でどのように使用しますか？

と呼ばれる<base-layout> コンポーネントが あり、そのテンプレートの内容は次のとおりであるとします。

<div class="child-node">
  <slot name="header" :text="headerText"></slot>
  <slot :text="defaultText"></slot>
  <slot name="footer" :text="footerText"></slot>
</div>
复制代码

見ることができ、div#child-node コンテナはそれぞれ、3つのスロットがあり header、  default、  footer。通常の状況では、ブロックレベルのラベルで別々にラップしますが、簡単にするためにここでは行いませんでした。次に、render関数（render）で上記のコードをリファクタリングします。

<script>
export default {
  data() {
    return {
      headerText: "child header text",
      defaultText: "child default text",
      footerText: "child footer text"
    };
  },
  render(h) {
    return h("div", { class: "child-node" }, [
      // 相当于 <slot name="header" :text="headerText"></slot>
      this.$scopedSlots.header({ text: this.headerText }),
      // 相当于 <slot :text="defaultText"></slot>
      this.$scopedSlots.default(this.defaultText),
      this.$scopedSlots.footer({ text: this.footerText })
    ]);
  }
};
</script>
复制代码

と呼ばれる<scoped-slots> 親コンポーネントがあるとし ます。テンプレート文法の定義によれば、slot-scopeまたは v-slotを使用し  て補間コンテンツを取得し、カスタムコンテンツの効果を実現できます。ここでは、Vue @が提供する最新の文法v-slotの省略形を使用します。親コンポーネントでの使用方法を示す2.6.x  ：

<div class="parent-node">
  parent content
  <base-layout>
    <template #header="{ text }">
      <p style="color: red">{
   
   { text }}</p>
    </template>
    <template #default="text">
      <!-- 默认内容是个字符串直接输出 -->
      <p style="color: deeppink">{
   
   { slotProp }}</p>
    </template>
    <template #footer="{ text }">
      <p style="color: orange">{
   
   { text }}</p>
    </template>
  </base-layout>
</div>
复制代码

 

上記はテンプレート構文を記述する方法にすぎません。次に、scopedSlots プロパティを使用して、render関数（render）で上記のコードを再構築します 。

<script>
import BaseLayout from "./base-layout.vue";
export default {
  name: "ScopedSlots",
  components: {
    BaseLayout
  },
  render(h) {
    return h("div", { class: "parent-node" }, [
      this.$slots.default,
      h("base-layout", {
        scopedSlots: {
          // 相当于下面代码：
          // <template #header="props">
          //   <p style="color:red">
          //     {
   
   { props.text }}
          //   </p>
          // <template>
          header: props => {
            return h("p", { style: { color: "red" } }, [props.text]);
          },
          default: props => {
            return h("p", { style: { color: "deeppink" } }, [props]);
          },
          footer: props => {
            return h("p", { style: { color: "orange" } }, [props.text]);
          }
        }
      })
    ]);
  }
};
</script>
复制代码

 

Jsxでの使用方法は？

Vueのほとんどの文法がJsxで異なって書かれていることはわかっています。詳細については、ここを参照してください。この記事では繰り返しません。ただし、このドキュメントではscopedSlotsの使用法については紹介していません。今日は、その使用方法を見ていきます。

使用する前に、Jsx構文の解析に関連するプラグインをインストールする必要があります。

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev
复制代码

次に、構成 .babelrc ファイル：

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}
复制代码

最後に、Jsx構文を使用して、上記のレンダリング関数のコードを再構築します。

<script>
import BaseLayout from "./base-layout.vue";
export default {
  name: "ScopedSlots",
  render() {
    return (
      <div class="parent-node">
        parent content
        <BaseLayout
          {...{
            scopedSlots: {
              header: props => {
                return <p style={
   
   { color: "red" }}>{props.text}</p>;
              },
              default: props => {
                return <p style={
   
   { color: "deeppink" }}>{props}</p>;
              },
              footer: props => {
                return <p style={
   
   { color: "orange" }}>{props.text}</p>;
              }
            }
          }}
        />
      </div>
    );
  }
};
</script>
复制代码

 

レンダリング関数と比較すると、まだいくつかの違いがあることがわかります。

• BaseLayout インポートしたものは直接使用できます
• レンダリング関数はh パラメータを省略し ます。そのため [email protected]+が 自動的にあなたを助けた注入
• スプレッド演算子の非構造化代入{...{xxx}} 構文を使用します。Babelの下位バージョンでは  、互換性処理のためにbabel-plugin-transform-object-rest-spreadが必要です。