快捷導(dǎo)航

Vue.js中組件中的slot實(shí)例詳解

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

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

Vue組件中的slot

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

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

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

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

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

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

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

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

接下來(lái)就是要在<person> 組件使用的時(shí)候添加點(diǎn)東西，就是具體內(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)然這樣還是不夠的，總得在模板中有點(diǎn)什么吧，如下，這里就該用到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實(shí)例的講解，大家如果有疑問(wèn)請(qǐng)留言討論，共同進(jìn)步，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

Vue.js
slot

相關(guān)文章

vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)動(dòng)畫(huà)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
Vue數(shù)字輸入框組件示例代碼詳解
很多朋友經(jīng)常遇到這樣的功能，只允許輸入數(shù)字，允許設(shè)置初始值、最大值、最小值，今天小編給大家分享示例代碼給大家介紹vue數(shù)字輸入框功能，感興趣的朋友一起看看吧
2020-01-01
Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載的使用示例
本文主要介紹了Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-10-10
vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能
這篇文章主要為大家介紹了vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
在vite項(xiàng)目中使用@進(jìn)行文件的引入方式
這篇文章主要介紹了在vite項(xiàng)目中使用@進(jìn)行文件的引入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue使用driver.js做引導(dǎo)頁(yè)
Driver.js是一個(gè)功能強(qiáng)大且高度可定制的基于原生JavaScript開(kāi)發(fā)的新用戶(hù)引導(dǎo)庫(kù)，本文主要介紹了Vue使用driver.js做引導(dǎo)頁(yè)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
Vue中的ESLint配置方式
這篇文章主要介紹了Vue中的ESLint配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue router+vuex實(shí)現(xiàn)首頁(yè)登錄驗(yàn)證判斷邏輯
這篇文章主要介紹了vue router+vuex實(shí)現(xiàn)首頁(yè)登錄判斷邏輯，用于判斷是否登錄首頁(yè)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue3+ts項(xiàng)目之安裝eslint、prettier和sass的詳細(xì)過(guò)程
這篇文章主要介紹了vue3+ts項(xiàng)目02-安裝eslint、prettier和sass的詳細(xì)過(guò)程,在本文講解中需要注意執(zhí)行yarn format會(huì)自動(dòng)格式化css、js、html、json還有markdown代碼，需要的朋友可以參考下
2023-10-10
vue3?emits事件使用示例詳解
這篇文章主要為大家介紹了vue3?emits事件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07