親子コンポーネントの通信を解決するための3つのVueスロット

<テンプレート>
  <div class="カテゴリ">
    <h1>{{タイトル}}</h1>
    <ul>
      <li 
      v-for="(item,index) in listData"
      :key="index">{{item}}</li>
    </ul>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  小道具: {
    リストデータ:配列、
    タイトル: 文字列
  }
}
</スクリプト>
<スタイルスコープ>
。カテゴリ{
  幅: 200ピクセル;
  高さ: 300px;
  背景色:ピンク;
}
</スタイル>

<テンプレート>
  <div id="アプリ">
    <Category :listData="ゲーム" :title="'ゲーム'" />
    <Category :listData="映画" :title="'映画'" />
    <Category :listData="食品" :title="'食品'" />
  </div>
</テンプレート>
<スクリプト>
'./components/Category.vue' からカテゴリーをインポートします。
エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    カテゴリ
  },
  データ （） {
    戻る {
      ゲーム:['クロスファイア','QQスピード','ロックキングダム'],
      映画:[『こんにちは、李華英』、『青春』、『つかの間の時間』]、
      食べ物:['邵陽米麺'、'長沙茶'、'重慶火鍋']
    }
  }
}
</スクリプト>
<スタイル>
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
}
</スタイル>

<テンプレート>
<div class="カテゴリ">
    <!-- スロット、スロットのデフォルト コンテンツを定義 -->
    <slot>親コンポーネントが値を渡さない場合は、このデフォルトが表示されます</slot>
    </div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        小道具: {
        }
    }
</スクリプト>

<テンプレート>
<div id="アプリ">
    <カテゴリー>
        <h1>ゲーム</h1>
        <!-- <ul>
<li v-for="(item, index) ゲーム内" :key="index">{{ item }}</li>
    </ul> -->
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb352264fa7bfdb6d211f2e71e87cc2c48d85b805.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931135&t=0b2c6c622c84a1e387196cce8f50455e">
    </カテゴリー>
    
    <カテゴリー>
        <h1>映画</h1>
        <img class="movies" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13236694597%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931502&t=f89c2197bda9bb129d9404d3c4b30f2f">
        <!-- <ul> -->
        <!-- <li v-for="(item, index) 映画内" :key="index">{{ item }}</li> -->
        <!-- </ul> -->
    </カテゴリー>
    <カテゴリー>
        <h1>食品</h1>
        <ul>
            <li v-for="(item, index) 食品内" :key="index">{{ item }}</li>
    </ul>
    </カテゴリー>
    
    <!-- 何も書いていないときに何が表示されるか確認します -->
    <カテゴリー>
    </カテゴリー>
    </div>
</テンプレート>
 
<スクリプト>
    './components/Category.vue' からカテゴリーをインポートします。
 
    エクスポートデフォルト{
        名前: 'アプリ'、
        コンポーネント:
            カテゴリ
        },
        データ （） {
            戻る {
                ゲーム:['クロスファイア','QQスピード','ロックキングダム'],
                映画:[『こんにちは、李華英』、『青春』、『つかの間の時間』]、
                食べ物:['邵陽米麺'、'長沙茶'、'重慶火鍋']
            }
        }
    }
</スクリプト>

<テンプレート>
  <div class="カテゴリ">
    <!-- 親コンポーネントに名前を付けて、どのスロットに配置するかを指定する必要があります。これが名前付きスロットと呼ばれる理由です--->
    <slot name="slot1">親コンポーネントが値を渡さない場合は、このデフォルトが表示されます</slot>
    <スロット名="スロット2"></スロット>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  小道具: {
  }
}
</スクリプト>

<テンプレート>
	<div id="アプリ">
    	<カテゴリー>
       	 <テンプレートスロット="スロット1">
          	  <h1>ゲーム</h1>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb352264fa7bfdb6d211f2e71e87cc2c48d85b805.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931135&t=0b2c6c622c84a1e387196cce8f50455e"
                 />
	</テンプレート>
	<テンプレートスロット="スロット2">
		<button >qq ログイン</button>
		<button >WeChatでログイン</button>
	</テンプレート>
 
</カテゴリー>
<カテゴリー>
    <テンプレートスロット="スロット1">
		<h1>映画</h1>
			<画像
     クラス="映画"
     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13236694597%2F641.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639931502&t=f89c2197bda9bb129d9404d3c4b30f2f"
     />
    </テンプレート>
    <テンプレートスロット="スロット2">
		<button >クリックしてチケットを購入</button>
    </テンプレート>
</カテゴリー>
 
<カテゴリー>
    <テンプレートスロット="スロット1">
		<h1>食品</h1>
		<ul>
    		<li v-for="(item, index) 食品内" :key="index">{{ item }}</li>
        </ul>
    </テンプレート>
</カテゴリー>
 
<!-- 何も書いていないときに何が表示されるか確認します -->
<カテゴリー> </カテゴリー>
</div>
</テンプレート>
 
<スクリプト>
    './components/Category.vue' からカテゴリーをインポートします。
 
    エクスポートデフォルト{
        名前: 'アプリ'、
        コンポーネント:
            カテゴリ
        },
        データ （） {
            戻る {
                ゲーム:['クロスファイア','QQスピード','ロックキングダム'],
                映画:[『こんにちは、李華英』、『青春』、『つかの間の時間』]、
                食べ物:['邵陽米麺'、'長沙茶'、'重慶火鍋']
            }
        }
    }
</スクリプト>

<テンプレート>
  <div class="カテゴリ">
    <slot name="slot1">親コンポーネントが値を渡さない場合は、このデフォルトが表示されます</slot>
    <slot name="slot2" :foods="foods">親コンポーネントが値を渡さない場合は、このデフォルト値が表示されます</slot>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      食べ物:['邵陽米麺'、'長沙茶'、'重慶火鍋']
    }
  }
}
</スクリプト>

<テンプレート>
  <div id="アプリ">
    <カテゴリー>
      <テンプレートスロット="スロット1">
        <h1>食品</h1>
      </テンプレート>
      <テンプレート スロット="スロット2" スコープ="リストデータ">
        <!-- わからない場合は、これが何であるかを出力できます。 {{listData}} -->
        <ul>
          <li v-for="(item, index) in listData.foods" :key="index">
            {{ アイテム }}
          </li>
        </ul>
      </テンプレート>
    </カテゴリー>
    <カテゴリー>
      <テンプレートスロット="スロット1">
        <h1>食品</h1>
      </テンプレート>
      <テンプレート スロット="スロット2" スコープ="リストデータ">
        <オル>
          <li v-for="(item, index) in listData.foods" :key="index">
            {{ アイテム }}
          </li>
        </ol>
      </テンプレート>
    </カテゴリー>
    <カテゴリー>
      <テンプレートスロット="スロット1">
        <h1>食品</h1>
      </テンプレート>
      <テンプレート スロット="スロット2" スコープ="リストデータ">
          <h4 v-for="(item, index) in listData.foods" :key="index">
            {{ アイテム }}
          </h4>
      </テンプレート>
    </カテゴリー>
    <カテゴリー>
      <テンプレート スロット="スロット1" スコープ="リストデータ">	
{{リストデータ}}
      </テンプレート>
    </カテゴリー>
  </div>
</テンプレート>
 
<スクリプト>
'./components/Category.vue' からカテゴリーをインポートします。
 
エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    カテゴリ
  }
}
</スクリプト>

<テンプレート スロット="スロット2" スコープ="リストデータ">
<!-- わからない場合は、これが何であるかを出力できます。 {{listData}} -->
<ul>
    <li v-for="(item, index) in listData.foods" :key="index">
        {{ アイテム }}
    </li>
    </ul>
</テンプレート>