【Vue】03 Slot 插槽 & 自定義事件

顧名思義就是一個槽，可以嵌入各種各樣的東西

Vue的插槽就是一個slot標簽，可以在這個定義了插槽的組件中插入其他的組件

 

但是有一點很重要：使用插槽的組件必須要用div標簽一個根標簽包裹，否則無效

<div id="container-element" >

<book>
  <aaa slot="aaa" v-bind:ta="head_title"></aaa>
  <bbb slot="aaa" v-for="item in items" v-bind:tb="item"></bbb>
</book>




</div>

<script type="text/javascript">

  Vue.component("book", {
    template :
      "<div>" +
      "<slot name='aaa'></slot>" +
      "<ul>" +
      "<slot name='bbb'></slot>" +
      "</ul>" +
      "</div>"
  });

  Vue.component("aaa", {
    props : ['ta'],
    template : "<h3>{{ta}}</h3>"
  });

  Vue.component("bbb",{
    props : ['tb'],
    template : "<li>{{tb}}</li>"
  });


  let vueModel = new Vue({
    el : "#container-element",
    data : {
      head_title : "書籍列表",
      items : [
        "java",
        "linux",
        "c++",
        "python",
        "rust"
      ]
    }

  });
</script>

效果：

自定義事件：

組件中的事件與要執行的方法是在這個組件對象中聲明：

測試效果：

但是在vueModel對象中的方法是不能被組件調用的

當前的方法可以在控制台中使用

效果：

 

v-for似乎是可以設置一個迭代變量，然后可以傳遞這個變量給組件渲染：

還是不是很能理解方法的綁定：

簡單來說就是這個意思：

$emit 觸發父組件的自定義事件

代碼：

<book>
  <aaa slot="aaa" v-bind:ta="head_title"></aaa>
  <bbb slot="aaa" v-for="(item,index) in items" v-bind:tb="item" v-bind:i="index" v-on:remove="removeBookItem(index)"></bbb>
</book>

</div>

<script type="text/javascript">

  Vue.component("book", {
    template :
      "<div>" +
      "<slot name='aaa'></slot>" +
      "<ul>" +
      "<slot name='bbb'></slot>" +
      "</ul>" +
      "</div>"
  });

  Vue.component("aaa", {
    props : ['ta'],
    template : "<h3>{{ta}}</h3>"
  });

  Vue.component("bbb",{
    props : ['tb','i'],
    template : "<li>{{i}}  {{tb}} <button @click='remove'>移除書籍</button></li> ",
    methods : {
      remove : function (i) {
        this.$emit("remove", i);
      }

    }

  });
  
  let vueModel = new Vue({
    el : "#container-element",
    data : {
      head_title : "書籍列表",
      items : [
        "java",
        "linux",
        "c++",
        "python",
        "rust"
      ]
    },
    methods : {
      removeBookItem : function (index) {
        // splice方法 (要執行刪除的當前元素的索引，要刪除的元素的個數， ...要增加的元素)
        alert("刪除了：" + this.items[index]);
        this.items.splice(index, 1);
      }
    }

  });
</script>