vueスロットを使ってコンテンツを配信する操作例【単一スロット、具名スロット、作用ドメインスロット】

5558 ワード

vue スロット配布内容

本論文の例は、Vueがスロットを使用してコンテンツを配信する動作を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
単一スロット
サブアセンブリテンプレートが少なくとも一つを含んでいない限りソケットは、親のセットの内容が破棄されます。サブアセンブリのテンプレートが属性のないスロットしかない場合、親コンポーネントから入ってきたコンテンツ全体のセグメントはスロットのあるDOM位置に挿入され、スロットタグ自体を置き換える。
最初はラベルのどの内容もバックアップ内容と見なされます。バックアップコンテンツはサブアセンブリのスコープ内でコンパイルされ、ホスト要素が空であり、挿入するコンテンツがない場合にのみ代替コンテンツが表示されます。
例:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue      -     </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
 
<div id="example">
  <div>
 <h1>        </h1>
 <my-component>
  <p>        </p>
  <p>         </p>
 </my-component>
</div>
</div>
 
 
var childNode = {
  //   <slot> ，            ，  <slot> ，            ，<slot>
  //         
 template: `
 <div>
 <h2>        </h2>
 <slot>
                  。
 </slot>
</div>
 `,
};
//      
new Vue({
 el: '#example',
 components: {
 'my-component': childNode
 }
})
</script>
</body>
</html>

名前スロット
＜slaot＞元素は特殊な特性を使うことができます。 name を選択します。複数のスロットには異なる名前があります。名前スロットは内容にマッチするセグメントに対応します。 slaot 特性の要素。
まだ匿名のスロットがあります。これは標準のスロットです。マッチングされたコンテンツセグメントの予備スロットとして見つけられません。デフォルトのスロットがない場合、これらは該当するコンテンツのセグメントが見つからないので、破棄されます。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue      -     </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
 
<div id="example">
 <app-layout>
 <h1 slot="header">           </h1>
 
 <p>         。</p>
 <p>       。</p>
 
 <p slot="footer">         </p>
</app-layout>
</div>
 <script>
 Vue.component('app-layout',{
 template:'<div class="container">'+
 '<header>'+
  '<slot name="header"></slot>'+
 '</header>'+
 '<main>'+
  '<slot></slot>'+
 '</main>'+
 '<footer>'+
  '<slot name="footer"></slot>'+
 '</footer>'+
'</div>'
 })
 
//      
new Vue({
 el: '#example',
 
})
</script>
</body>
</html>

スコープスロット
スコープスロットは、レンダリングされた要素の代わりに、特別なタイプのスロットである。
サブコンポーネントでは、データをスロットに渡すだけで、プロップをコンポーネントに渡すようにします。


<div class="child">
 <slot text="hello from child"></slot>
</div>

父の等級には特殊な特性がある。 slot-scope の

iOS逆教程のlogify追跡方法の呼び出し

ajaxネットワーク要求のパッケージ例について