vue如何使用 Slot 分發(fā)內(nèi)容實(shí)例詳解

更新時(shí)間：2017年09月05日 11:33:51 作者：Besmall

本篇文章主要介紹了vue如何使用 Slot 分發(fā)內(nèi)容實(shí)例詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

vue我自己還在摸索學(xué)習(xí)中，今天學(xué)習(xí)了使用 Slot 分發(fā)內(nèi)容，給自己留個(gè)小筆記

使用slot分發(fā)內(nèi)容我們要注意2點(diǎn)

<app> 組件不知道它會(huì)收到什么內(nèi)容。這是由使用 <app> 的父組件決定的。

<app> 組件很可能有它自己的模板。

為了讓組件可以組合，我們需要一種方式來(lái)混合父組件的內(nèi)容與子組件自己的模板。

【案例】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue-Slot 分發(fā)內(nèi)容</title>
  <script type="text/javascript" src="js/vue.js"></script>
  <style>
    .sf{
      margin: 10px;
      width: 150px;
      border: 1px solid #ccc;
    }
    .sf-header,.sf-bottom{
      height: 30px;
      background: sandybrown;
    }
    .sf-body{
      min-height: 100px;
    }

  </style>
</head>
<body>
  <div id="app">
    <shoufa>
      <h2 slot="title">學(xué)習(xí)vue</h2>
      <p>Vue.js（讀音 /vjuː/，類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
        與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。
        Vue 的核心庫(kù)只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合</p>
      <h4 slot="bottom">vue很好學(xué)</h4>
    </shoufa>
  </div>
  <script type="text/x-template" id="sfTpl">
    <div class="sf">
      <div class="sf-header"><slot name="title"></slot></div>
      <div class="sf-body">
        <slot></slot>
      </div>
      <div class="sf-bottom"><slot name="bottom"></slot>
      </div>
    </div>
  </script>

  <script>
    var sf ={
      template:"#sfTpl",
    }
    var app = new Vue({
      el:"#app",
      components:{
        'shoufa':sf
      }
    })
  </script>
</body>
</html>

結(jié)果如下

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue基于element的區(qū)間選擇組件
這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue3通過(guò)hooks方式封裝節(jié)流和防抖的代碼詳解
vue3 中的 hooks 就是函數(shù)的一種寫(xiě)法,就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來(lái),放到單獨(dú)的js文件中,或者說(shuō)是一些可以復(fù)用的公共方法/功能,本文給大家介紹了Vue3通過(guò)hooks方式封裝節(jié)流和防抖,需要的朋友可以參考下
2024-10-10
vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法
在vsCode中書(shū)寫(xiě)Vue頁(yè)面時(shí)無(wú)法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法,需要的朋友可以參考下
2023-03-03
Vue導(dǎo)出Excel功能的全過(guò)程記錄
在開(kāi)發(fā)后臺(tái)管理系統(tǒng)的時(shí)候,很多地方都要用到導(dǎo)出excel 表格,比如將table中的數(shù)據(jù)導(dǎo)出到本地,這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)出Excel功能的相關(guān)資料,需要的朋友可以參考下
2021-07-07
element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)詳解
element-ui中的table的多選很好用,但是如果其中某一項(xiàng)禁止選擇,該怎樣操作呢,下面這篇文章主要給大家介紹了關(guān)于element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)的相關(guān)資料,需要的朋友可以參考下
2023-01-01
Vue嵌套iframe時(shí)$router.go(-1)后退bug的原因解析
這篇文章主要介紹了Vue嵌套iframe,$router.go(-1)后退bug的問(wèn)題原因及解決方法,本文給大家分享問(wèn)題原因所在及解決方案,需要的朋友可以參考下吧
2023-09-09
vue實(shí)現(xiàn)tab標(biāo)簽(標(biāo)簽超出自動(dòng)滾動(dòng))
當(dāng)創(chuàng)建的tab標(biāo)簽超出頁(yè)面可視區(qū)域時(shí)自動(dòng)滾動(dòng)一個(gè)tab標(biāo)簽距離，并可手動(dòng)點(diǎn)擊滾動(dòng)tab標(biāo)簽，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
Vue如何實(shí)現(xiàn)文件預(yù)覽和下載功能的前端上傳組件
在Vue.js項(xiàng)目中,使用ElementUI的el-upload組件可以輕松實(shí)現(xiàn)文件上傳功能,通過(guò)配置組件參數(shù)和實(shí)現(xiàn)相應(yīng)的方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
vscode中prettier和eslint換行縮進(jìn)沖突的問(wèn)題
這篇文章主要介紹了vscode中prettier和eslint換行縮進(jìn)沖突的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
使用vue-touch報(bào)priority錯(cuò)誤的解決
這篇文章主要介紹了使用vue-touch報(bào)priority錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03