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>
<!-- 調用父組件的方法 -->
<h1 @click='click'>aaa</h1></modal>
<modal>
<h2>bbb</h2></modal>
<modal>
<!-- 使用slot設置模板中的名字,會插入到指定的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>
總結
以上所述是小編給大家介紹的vue slot 在子組件中顯示父組件傳遞的模板，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了部屬vue項目,訪問路徑設置非根,顯示白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案
這篇文章主要介紹了vue router動態(tài)路由下讓每個子路由都是獨立組件的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
el-form組件使用resetFields重置失效的問題解決
用el-form寫了包含三個字段的表單,使用resetFields方法進行重置,發(fā)現點擊重置或要清空校驗時是失效的,所以本文給大家介紹了el-form組件使用resetFields重置失效的問題解決,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了vue實現表格數據的增刪改查，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了使用vue編寫h5公眾號跳轉小程序,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
在Vue中,父組件可以通過`ref`引用子組件,并通過`$refs`屬性來訪問子組件的數據,下面分步驟給大家介紹vue 父組件獲取子組件里面的data數據,感興趣的朋友一起看看吧2024-06-06
在部署 Vue.js 項目時,有時會遇到首頁加載后出現白屏的情況,這可能是由于多種原因造成的,本文將介紹一些常見的排查方法和解決方案,幫助開發(fā)者快速定位問題并解決,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
今天小編就為大家分享一篇Vue中對拿到的數據進行A-Z排序的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3+element?plus中利用el-menu如何實現路由跳轉
這篇文章主要給大家介紹了關于vue3+element?plus中利用el-menu如何實現路由跳轉的相關資料,在Vue?Router中我們可以使用el-menu組件來實現菜單導航,通過點擊菜單項來跳轉到不同的路由頁面,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關于vue子組件獲取到它父組件數據的4種方法,對于vue來說組件之間的消息傳遞是非常重要的,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08