Vue.js中組件中的slot實例詳解

更新時間：2017年07月17日 14:18:14 作者：Dear_Mr

這篇文章主要介紹了Vue.js中組件中的slot實例詳解的相關(guān)資料,需要的朋友可以參考下

Vue組件中的slot

slot 可以實現(xiàn)在已經(jīng)定義的組件中添加內(nèi)容，組件會接收內(nèi)容并輸出，假如有一個組件person，它的里面包含的是個人信息，如下面這樣

 <template id="per">
    <div>
      <p>姓名:...</p>
      <p>年齡:...</p>
      <p>職業(yè):...</p>
    </div>
  </template>

在應(yīng)用的時候，當(dāng)然希望這里面可以是靈活變化的，所以這就需要用到slot了

首先要做的事情就是創(chuàng)建這樣一個組件，這里我采用的是<template>的形式，如下面這樣

<template id="per">
    <div>
      <p>姓名:</p>
      <p>年齡:</p>
      <p>職業(yè):</p>
    </div>
  </template>

可以看到我這里給template添加了id，這個是為了后面的操作

下面使用Vue的構(gòu)造器，創(chuàng)建Vue實例，然后添加局部的組件，如下面這樣

  var person = {
     template : "#per"  //利用id
    };
    new Vue({
      el: "#app",
      data: {
        componentData: {
          name : "vam",
          age : 18,
          job : "student"
        }
      },
      components : {
        "person" : person
      }
    });

接下來就是要在<person> 組件使用的時候添加點東西，就是具體內(nèi)容，下面這樣：

  <div id="app">
    <person>
      <span slot="name">{{componentData.name}}</span>
      <span slot="age">{{componentData.age}}</span>
      <span slot="job">{{componentData.job}}</span>
    </person>
  </div>

當(dāng)然這樣還是不夠的，總得在模板中有點什么吧，如下，這里就該用到slot了

 <template id="per">
    <div>
      <p>姓名:<slot name="name"></slot></p>
      <p>年齡:<slot name="age"></slot></p>
      <p>職業(yè):<slot name="job"></slot></p>
    </div>
  </template>

之后就可以看到想要的結(jié)果了

以上就是Vue.js中組件中的slot實例的講解，大家如果有疑問請留言討論，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

Vue.js
slot

相關(guān)文章

Vue3中使用defineCustomElement 定義組件詳解
這篇文章主要為大家介紹了Vue3中使用defineCustomElement 定義組件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
Vue導(dǎo)入Echarts實現(xiàn)折線散點圖
這篇文章主要為大家詳細介紹了Vue導(dǎo)入Echarts實現(xiàn)折線散點圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
TypeScript踩坑之TS7053的問題及解決
這篇文章主要介紹了TypeScript踩坑之TS7053的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題
這篇文章主要介紹了Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
使用props傳值時無法在mounted處理的解決方案
這篇文章主要介紹了使用props傳值時無法在mounted處理的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue項目中路由跳轉(zhuǎn)頁面不變問題及解決
這篇文章主要介紹了vue項目中路由跳轉(zhuǎn)頁面不變問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue.js展示AJAX數(shù)據(jù)簡單示例講解
當(dāng)通過AJAX方式取回數(shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡單示例
2017-03-03
vue+ts實現(xiàn)元素鼠標(biāo)拖動效果
這篇文章主要為大家詳細介紹了vue+ts實現(xiàn)元素鼠標(biāo)拖動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue?展示.md文件的方法詳解
這篇文章主要介紹了Vue?展示.md文件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-05-05
詳解Vue中$refs和$nextTick的使用方法
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
2022-03-03