vue如何使用 Slot 分發(fā)內容實例詳解
更新時間：2017年09月05日 11:33:51 作者：Besmall
本篇文章主要介紹了vue如何使用 Slot 分發(fā)內容實例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
vue我自己還在摸索學習中，今天學習了使用 Slot 分發(fā)內容，給自己留個小筆記
使用slot分發(fā)內容我們要注意2點
<app> 組件不知道它會收到什么內容。這是由使用 <app> 的父組件決定的。
<app> 組件很可能有它自己的模板。
為了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。
【案例】
<!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ā)內容</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">學習vue</h2>
<p>Vue.js（讀音 /vjuː/，類似于 view） 是一套構建用戶界面的漸進式框架。
與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設計。
Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合</p>
<h4 slot="bottom">vue很好學</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>
結果如下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
這篇文章主要介紹了vue.js綁定事件監(jiān)聽器的方法,結合實例形式分析了vue.js基于v-on事件綁定響應鼠標點擊相關操作技巧,需要的朋友可以參考下2018-07-07
Vite是一個開發(fā)環(huán)境工具，旨在提高我們的開發(fā)速度,下面這篇文章主要給大家介紹了關于如何為老vue項目添加vite支持的相關資料,需要的朋友可以參考下2021-09-09
vue3中實現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時應選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導致TypeError錯誤,安裝后,需在項目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關說明,需要的朋友可以參考下2024-09-09
vue.js 2.0大家對此并不陌生吧。最令人興奮的是更新頁面的"虛擬DOM"的加入。那么對于虛擬 DOM 可以做什么呢？今天小編通過本文給大家解答下2016-10-10
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值，在 JavaScript 中，原始值是按值傳遞的，引用類型是按引用傳遞的，這意味著，如果一個函數(shù)接收了一個原始值作為參數(shù)，那么形參和實參之間是沒有引用關系的，它們是完全獨立的兩個值2023-01-01
用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項目的方法
今天小編就為大家分享一篇用npm安裝vue和vue-cli,并使用webpack創(chuàng)建項目的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
如果在面試中，面試官問你Vue組件之間有哪些數(shù)據(jù)通信方式，你會怎么回復，不要擔心，本文為大家整理了超全的Vue3中組件數(shù)據(jù)通信方式，需要的小伙伴快收藏起來吧2023-06-06
vue實現(xiàn)錄音并轉文字功能包括PC端web手機端web(實現(xiàn)過程)
vue實現(xiàn)錄音并轉文字功能,包括PC端,手機端和企業(yè)微信自建應用端,本文通過實例代碼介紹vue實現(xiàn)錄音并轉文字功能包括PC端web手機端web,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了vue+echarts繪制折線圖、柱狀圖和扇形圖教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細介紹了vue使用nprogress實現(xiàn)進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12