前端開發系列051-基礎篇之自定義事件和插槽(Vue)
阿新 • • 發佈：2022-12-12
title: 前端開發系列051-基礎篇之自定義事件和插槽(Vue)
tags:
categories: []
date: 2017-12-14 00:00:00
本文是早期學習Vue整理的一些階段性總結，內容主要關於Vue框架中元件的事件傳遞和插槽。
一、元件通訊（自定義事件）
元件間通訊主要涉及到兩方面的內容，即父元件（父級標籤）向子元件傳遞資料以及子元件通過自定義事件的方式來反饋給父元件。
資料的傳遞我們只需要在元件中使用props屬性來記錄和接收需要的內容即可，這裡簡單通過程式碼示例的方式說明下自定義事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../Vue/vue.min.js"></script> </head> <body> <div id="demoID"> <button-custom @countereventfunction="totalEventFunction()"></button-custom> <button-custom @countereventfunction="totalEventFunction()"></button-custom> <div>按鈕被點選的總次數為 {{total}}</div> </div> <template id="button_custom"> <button @click="countereventfunction">點選了當前按鈕的次數為：{{counter}}</button> </template> <script> //例項化元件 Vue.component("button-custom",{ template:"#button_custom", data:function () { return { counter:0 } }, methods:{ countereventfunction:function () { //執行標籤的點選事件（先把計數器 + 1） this.counter += 1; //發出通知 表示counterEventFunction方法已經被點選 this.$emit("countereventfunction"); } } }); //建立例項化Vue物件 new Vue({ el: "#demoID", data: { total: 0 }, methods: { totalEventFunction: function () { console.log("___"); this.total += 1; } } }); </script> </body> </html>
上面的程式碼中我們在元件中編寫了一個按鈕標籤，該標籤在點選的時候能夠更新按鈕的內容 counter計數器加1、另外我們還有一個標籤用來統計頁面中所有按鈕被點選的次數，這就要求每次元件中標籤的點選事件被觸發的時候父級標籤應該收到通知，我們通過this.$emit方法來實現。
程式碼的執行結果為:
注意：在使用v-on標籤或者是其語法糖@的時候，函式的名稱不支援駝峰標識命名的方式。二、插槽（內容分發）
插槽的簡單說明：Vue 實現了一套內容分發的 API，這套 API 基於當前的 Web Components 規範草案，將
插槽分成兩種，有名稱的插槽和沒有名稱的插槽
插槽的使用切入點是什麼？
我們註冊好元件之後，在使用元件的時候使用的自定義標籤對，在這個標籤對中可以有內容。
如果在定義元件的時候，我們在元件中預留了
下面給出匿名插槽和具名插槽使用的程式碼示例：
匿名插槽示例
<div id="demoID"> <my-slot> <p>我是插槽的內容 p標籤</p> <div>我是插槽的內容 div標籤</div> <input type="date"> </my-slot> <hr> <my-slot></my-slot> </div> <template id="my_slot"> <div> <h1>示例程式碼的頭部標題</h1> <!--在元件的頭部和底部中間的內容是不確定的--> <!--這個預留一個沒有名稱的插槽：匿名插槽--> <!--slot標籤中可以有具體的內容，如果在使用元件的時候自定義標籤中有內容，那麼則替換slot中的部分--> <slot>預留的插槽出口</slot> <footer>示例程式碼的底部標籤</footer> </div> </template> <script> //元件例項化 Vue.component("my-slot",{ template:"#my_slot" }) new Vue({ el:"#demoID" }) </script>
程式碼在執行的時候，元件中預留的slot標籤會被自定義標籤my-slot（元件）內部的標籤完成替換。
具名插槽程式碼示例
v id="demoID">
<my-slot>
<div slot="cpu">Core i8 </div>
<div slot="memory">64GB記憶體條</div>
<div slot="store">我是儲存相關的插槽資訊1</div>
<div slot="store">我是儲存相關的插槽資訊2</div>
<div slot="hard-drive">1TB的固態硬碟</div>
</my-slot>
</div>
<template id="my_slot">
<div class="main">
<slot name="cpu">我是cpu插槽</slot><br>
<slot name="memory">我是memory插槽</slot><br>
<slot name="store">我是儲存插槽</slot><br>
<slot name="hard-drive">我是硬碟插槽</slot><br>
</div>
</template>
<script>
//元件例項化
Vue.component("my-slot",{
template:"#my_slot"
});
//建立Vue例項物件
new Vue({
el:"#demoID"
})
</script>
程式碼的執行結果為：