vue slot 在子組件中顯示父組件傳遞的模板
更新時間：2018年03月02日 10:58:58 作者：阿豪boy
這篇文章主要介紹了vue slot 在子組件中顯示父組件傳遞的模板,需要的朋友可以參考下
父組件使用沒有指定slot屬性，默認為default
在slot中可以使用默認值，如果父組件沒有傳遞對應的slot，則會顯示默認值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js" charset="utf-8"></script>
</head>
<body>
<div id="app">
<modal>
<!-- 調(diào)用父組件的方法 -->
<h1 @click='click'>aaa</h1></modal>
<modal>
<h2>bbb</h2></modal>
<modal>
<!-- 使用slot設(shè)置模板中的名字,會插入到指定的slot中 -->
<p slot='title'>hello</p>
<p slot='content'>
world
</p>
</modal>
<modal></modal>
</div>
<template id="modal">
<!-- 使用slot在子組件中顯示父組件傳過來的模板 -->
<div>
modal
<slot name='default'>如果沒有會使用這個默認值</slot>
<h1>
title:
<slot name='title'>
</slot>
</h1>
content:
<slot name='content'></slot>
</div>
</template>
<script type="text/javascript">
let modal = {
template: '#modal'
}
new Vue({
el: '#app',
components: {
// es 簡寫 ，只寫一個的意思為
// modal:modal
modal
},
methods: {
click() {
console.log('aaa')
}
}
})
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的vue slot 在子組件中顯示父組件傳遞的模板，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue.js實現(xiàn)一個todo-list的上移下移刪除功能
這篇文章主要介紹了Vue.js實現(xiàn)一個todo-list的上移下移刪除功能,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細介紹了vue用BMap百度地圖實現(xiàn)即時搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家詳細介紹了如何基于vue實現(xiàn)圖片預覽功能并顯示在彈窗的最上方,感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
這篇文章主要為大家詳細介紹了vue回到頂部監(jiān)聽滾動事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)抽屜彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
elementUI el-form 數(shù)據(jù)無法賦值且不報錯解決方法
本文主要介紹了elementUI el-form 數(shù)據(jù)無法賦值且不報錯解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12
vue 實現(xiàn)通過vuex 存儲值 在不同界面使用
今天小編就為大家分享一篇vue 實現(xiàn)通過vuex 存儲值 在不同界面使用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue項目中如何調(diào)用多個不同的ip接口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue+axios全局添加請求頭和參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在 Vue 中,組件是構(gòu)建用戶界面的基礎(chǔ),而動態(tài)組件的引入,更是讓開發(fā)者能夠在應用中實現(xiàn)靈活、可重用的視圖邏輯,本文將探討 Vue 3 中的動態(tài)組件,分享其使用場景,并通過示例代碼來說明其操作方法,需要的朋友可以參考下2025-01-01