十一、スロット

45480 ワード
vue
スロットの説明
  • スロットは、Vueがコンテンツ配信を実現したAPIである.
  • 要素:要素は、コンテンツ配信を担持する出口
    • として機能する.
  • コンポーネントがレンダリングされると、要素が挿入するコンテンツ(文字列、HTML、コンポーネント)
    • に置き換えられます.
    文字列
    
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
  <div id="app">
    <hello-word>
        
    hello-word>
  div>
  
  <template id='hello'>
    <div>
      <span>  ！span>
      <slot>slot>
    div>
  template>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  <script>
    const HelloWord = {
      template: '#hello'
    }
    new Vue({
      el: '#app',
      components: {
        HelloWord
      }
    })
  script>
body>
html>

    HTML 
    <body>
  <div id="app">
    <hello-word>
      <h1>  h1>
    hello-word>
  div>
  <template id='hello'>
    <div>
      <span>  ！span>
      <slot>slot>
    div>
  template>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  <script>
    const HelloWord = {
      template: '#hello'
    }
    new Vue({
      el: '#app',
      components: {
        HelloWord
      }
    })
  script>
body>

    コンポーネント
    <body>
  <div id="app">
    <hello-word>
      <demo-scope>demo-scope>
    hello-word>
  div>
  
  <template id='hello'>
    <div>
      <span>  ！span>
      <slot>slot>
    div>
  template>
  
  <template id='scope'>
    <div>
           ？
    div>
  template>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  <script>
    const HelloWord = {
      template: '#hello'
    }
    const DemoScope = {
      template: '#scope'
    }
    new Vue({
      el: '#app',
      components: {
        HelloWord,
        DemoScope
      }
    })
  script>
body>

    に注意⚠️:要素がない場合、コンポーネントの開始ラベルから終了ラベルまでの間のコンテンツはすべて破棄されます.
    名前付きスロットv-slotはVue 2から指令する.6.0から導入され、より良いslotおよびslot-scopeの特性を提供するAPI代替スキーム
  • nameを持たない要素には、「default」
    • という名前が隠されています.
  • 名前付きスロットにコンテンツを提供する場合、
    • Vueルーティングパラメータparams query
    vue開発環境、正式環境の配置と原理