vue如何使用 Slot 分發(fā)內(nèi)容實例詳解
更新時間：2017年09月05日 11:33:51 作者：Besmall
本篇文章主要介紹了vue如何使用 Slot 分發(fā)內(nèi)容實例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
vue我自己還在摸索學習中，今天學習了使用 Slot 分發(fā)內(nèi)容，給自己留個小筆記
使用slot分發(fā)內(nèi)容我們要注意2點
<app> 組件不知道它會收到什么內(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">學習vue</h2>
<p>Vue.js（讀音 /vjuː/，類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。
與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計。
Vue 的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合</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>
結(jié)果如下
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue3通過hooks方式封裝節(jié)流和防抖的代碼詳解
vue3 中的 hooks 就是函數(shù)的一種寫法,就是將文件的一些單獨功能的js代碼進行抽離出來,放到單獨的js文件中,或者說是一些可以復(fù)用的公共方法/功能,本文給大家介紹了Vue3通過hooks方式封裝節(jié)流和防抖,需要的朋友可以參考下2024-10-10
在vsCode中書寫Vue頁面時無法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無法提示html標簽的操作方法,需要的朋友可以參考下2023-03-03
在開發(fā)后臺管理系統(tǒng)的時候,很多地方都要用到導(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的多選很好用,但是如果其中某一項禁止選擇,該怎樣操作呢,下面這篇文章主要給大家介紹了關(guān)于element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)的相關(guān)資料,需要的朋友可以參考下2023-01-01
Vue嵌套iframe時$router.go(-1)后退bug的原因解析
這篇文章主要介紹了Vue嵌套iframe,$router.go(-1)后退bug的問題原因及解決方法,本文給大家分享問題原因所在及解決方案,需要的朋友可以參考下吧2023-09-09
當創(chuàng)建的tab標簽超出頁面可視區(qū)域時自動滾動一個tab標簽距離，并可手動點擊滾動tab標簽，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
Vue如何實現(xiàn)文件預(yù)覽和下載功能的前端上傳組件
在Vue.js項目中,使用ElementUI的el-upload組件可以輕松實現(xiàn)文件上傳功能,通過配置組件參數(shù)和實現(xiàn)相應(yīng)的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
vscode中prettier和eslint換行縮進沖突的問題
這篇文章主要介紹了vscode中prettier和eslint換行縮進沖突的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了使用vue-touch報priority錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03