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

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

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

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

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

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

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

為了讓組件可以組合，我們需要一種方式來混合父組件的內(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 采用自底向上增量開發(fā)的設(shè)計(jì)。
        Vue 的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(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é)果如下

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

您可能感興趣的文章:

相關(guān)文章

vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
這篇文章主要介紹了vue.js綁定事件監(jiān)聽器的方法,結(jié)合實(shí)例形式分析了vue.js基于v-on事件綁定響應(yīng)鼠標(biāo)點(diǎn)擊相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
如何為老vue項(xiàng)目添加vite支持詳解
Vite是一個(gè)開發(fā)環(huán)境工具，旨在提高我們的開發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項(xiàng)目添加vite支持的相關(guān)資料,需要的朋友可以參考下
2021-09-09
vue3中實(shí)現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時(shí)應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯(cuò)誤,安裝后,需在項(xiàng)目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說明,需要的朋友可以參考下
2024-09-09
探究Vue.js 2.0新增的虛擬DOM
vue.js 2.0大家對(duì)此并不陌生吧。最令人興奮的是更新頁面的"虛擬DOM"的加入。那么對(duì)于虛擬 DOM 可以做什么呢？今天小編通過本文給大家解答下
2016-10-10
Vue六大基本類型中的原始值響應(yīng)式
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值，在 JavaScript 中，原始值是按值傳遞的，引用類型是按引用傳遞的，這意味著，如果一個(gè)函數(shù)接收了一個(gè)原始值作為參數(shù)，那么形參和實(shí)參之間是沒有引用關(guān)系的，它們是完全獨(dú)立的兩個(gè)值
2023-01-01
用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法
今天小編就為大家分享一篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項(xiàng)目的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue3中組件數(shù)據(jù)通信方式總結(jié)
如果在面試中，面試官問你Vue組件之間有哪些數(shù)據(jù)通信方式，你會(huì)怎么回復(fù)，不要擔(dān)心，本文為大家整理了超全的Vue3中組件數(shù)據(jù)通信方式，需要的小伙伴快收藏起來吧
2023-06-06
vue實(shí)現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機(jī)端web(實(shí)現(xiàn)過程)
vue實(shí)現(xiàn)錄音并轉(zhuǎn)文字功能,包括PC端,手機(jī)端和企業(yè)微信自建應(yīng)用端,本文通過實(shí)例代碼介紹vue實(shí)現(xiàn)錄音并轉(zhuǎn)文字功能包括PC端web手機(jī)端web,感興趣的朋友跟隨小編一起看看吧
2024-08-08
vue+echarts繪制折線圖、柱狀圖和扇形圖教程
這篇文章主要介紹了vue+echarts繪制折線圖、柱狀圖和扇形圖教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue使用nprogress實(shí)現(xiàn)進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue使用nprogress實(shí)現(xiàn)進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12