溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue我自己還在摸索學習中，今天學習了使用 Slot 分發內容，給自己留個小筆記
使用slot分發內容我們要注意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 分發內容</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>
<h3 slot="title">學習vue</h3>
<p>Vue.js（讀音 /vjuː/，類似于 view） 是一套構建用戶界面的漸進式框架。
與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。
Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合</p>
<h5 slot="bottom">vue很好學</h5>
</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>
結果如下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
