ヴューのスロットに【遠位開発]

スロット予約されたスペース

<slot></slot>

そのような成分をカプセル化するにはどうすれば？

• 反対、共通の抽出。

1. 最良の方法は、異なるスロットにさらされる、アセンブリ内に引き込まれ、共通のパッケージ化することです
2. 我々はさておきスロットを設定すると、ユーザーが自分のニーズに応じて、どのような挿入口を決定させることができます
3. 検索ボックス、テキスト、またはメニュー。呼び出し側によって決定します

  <template id="cpn">
    <div>
      <h2>我是组件</h2>
      <p>我是组件2</p>
      <slot></slot>
    </div>

スロットは、位置に留まることですので、

  <div id="app">
    <cpn><button>按钮</button></cpn>
    <cpn><span>哈哈哈</span></cpn>
  </div>

• 直接の例の書き込みボタンとスパン内部
  

第2のスロットの使用：設定のデフォルト

<slot><button>给插槽设置默认值</button></slot>

• 設定がない場合には、デフォルト値ボタン
  

• スロット内の複数の値として一緒に元素置換もし

名前付きスロット

  <template id="cpn">
    <div>
      <slot name="left"><button>按钮</button></slot>
      <slot name="center"><span>哈哈</span></slot>
      <slot name="right"><input type="text"></slot>
    </div>
  </template>

• スロットに配置された名前、タイムスロット設定プロパティを置換する検索要素

<div id="app">
    <cpn><span slot="left">替换</span></cpn>
  </div>

コンパイルスコープ

<div id="app">
    <cpn v-show='' v-for=(item in names)></cpn>
</div>

<template id="cpn">
    <div>
      <h2>我是子组件</h2>
      <p>我是内容</p>
      <button v-show='' v-for=''>anniu </button>
    </div>
  </template>

• どこどこのドメインを使用する方法

スロットスコープ

• あるいは親コンポーネントタグスロット、コンテンツサブアセンブリを提供するスロット
  

//子组件
data(){
            return {
              pLanguage:['java','javaScript','c++','python']
            }
          }

- サブアセンブリのテンプレート

<template id="cpn">
    <div>
      <slot :data="pLanguage">
        <ul>
          <li v-for="item in pLanguage">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>

-次いで、親コンポーネント内のプロパティを結合スロット動的一対の slot-scope値を渡すを使用することができます

親コンポーネント

<div id="app">
   <cpn>
     <template slot-scope="dataApp">
       <span v-for="item in dataApp.data">{{item}} </span>
     </template>
   </cpn>
 </div>