vue組建開發-solt

時間 2019-11-20

標籤 vue 組建開發 solt 简体版

原文原文鏈接

使用組件的時候，常常須要在父組件中爲子組件中插入一些標籤等。固然其實能夠經過屬性等操做，可是比較麻煩，直接寫標籤仍是方便不少。那麼Vue提供了slot協助子組件對父容器寫入的標籤進行管理。html

當父容器寫了額外的內容時，若是子組件剛好有一個slot標籤，那邊子容器的slot標籤會被父容器寫入的內容替換掉。vue

好比下面的例子：app

<!DOCTYPE html>
<<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之extend全局方法</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--父容器輸入標籤-->
    <my-slot>
      <h3>這裏是父容器寫入的</h3>
    </my-slot>

    <!--父容器綁定數據到子容器的slot,這裏的做用域是父容器的啊。-->
    <my-slot>{{ email }}</my-slot>

    <!--父容器什麼都不傳內容-->
    <my-slot></my-slot>
  </div>
  <script>
    // 反引號：能夠定義多行字符串。
    var temp = `
      <div>
        <h1>這裏是子組件</h1>
        <hr>
        <slot>slot標籤會被父容器寫的額外的內容替換掉，若是父容器沒有寫入任何東西，此標籤將保留！</slot>
      </div>
    `;
    Vue.component('MySlot', {          // 若是定義的組件爲MySlot，那麼用組件的時候：<my-slot></my-slot>
      template: temp,
    });
    // 初始化一個Vue實例
    var app = new Vue({
      el: '#app',
      data: {
       email: 'flydragon@gmail.com'
      }
    });
  </script>
</body>
</html>

最終結果：code

<div id="app"> <div> <h1>這裏是子組件</h1> <hr> <h3>這裏是父容器寫入的</h3> </div>component

<div> <h1>這裏是子組件</h1> <hr> flydragon@gmail.com </div>htm

<div> <h1>這裏是子組件</h1> <hr> slot標籤會被父容器寫的額外的內容替換掉，若是父容器沒有寫入任何東西，此標籤將刪除！ </div> </div>ip