Vue組件中的slot

憑借整站使用H5技術(shù)的創(chuàng)新體驗(yàn)、定制設(shè)計(jì)、設(shè)計(jì)團(tuán)隊(duì)積累與透明式的服務(wù)過(guò)程,符合行業(yè)特點(diǎn)，專屬顧問(wèn)根據(jù)企業(yè)產(chǎn)品，消費(fèi)群體屬性，準(zhǔn)確定位；設(shè)計(jì)師以目標(biāo)客戶為中心，以突出品牌官網(wǎng)特性為宗旨，定制專屬網(wǎng)站建設(shè)設(shè)計(jì)方案。

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ì)本站的支持！

文章標(biāo)題：Vue.js中組件中的slot實(shí)例詳解
標(biāo)題鏈接：http://sd-ha.com/article28/josocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、手機(jī)網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站營(yíng)銷、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)