官方教程: https://cn.vuejs.org/v2/guide/
vue solt 插槽使用
如果現在事先模板中不知道需要什麼內容,需要在使用時傳遞 就可以使用插槽
with來實現,這種效果! 類似ThinkPHP中的模板繼承 的block標籤的功能
匿名插槽
顧名思義就是沒有名字的插槽, 匿名插槽只能有一個
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue study</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-comp>
<slot> <p> 這是使用了插槽,如果沒有插槽,這裡的內容不會顯示 </p> </slot>
</my-comp>
</div>
<!--templates-->
<template id="my">
<div>
<p>其他內容</p>
<slot> <span>匿名插槽 -- 預設內容</span> </slot>
<p>其他內容</p>
</div>
</template>
<!-- JavaScript -->
<script>
// Register Vue Component
let myComp = Vue.extend({
template: '#my',
});
const vm = new Vue({
el: '#app',
data: {
},
components: {
"my-comp": myComp,
},
});
</script>
</body>
</html>
複製程式碼實名插槽
實名插槽可以有多個,在使用時必須使用name屬性來標識
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue study</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
注意: 這裡放的內容都是屬於父級的, 所以 @click="fn" 這個fn方
法加在元件中是沒有用的,必須加在 vm 這個例項中
-->
<my-comp>
<div slot="content">
這是在使用時傳入的內容...
<a href="" @click="fn"></a>
</div>
</my-comp>
</div>
<!--templates-->
<template id="my">
<div>
<slot name="title">default title</slot>
<slot name="content">default content</slot>
</div>
</template>
<!-- JavaScript -->
<script>
// Register Vue Component
let myComp = Vue.extend({
template: '#my',
});
const vm = new Vue({
el: '#app',
data: {
},
methods: {
fn () {
alert("hello");
}
},
components: {
"my-comp": myComp,
},
});
</script>
</body>
</html>
複製程式碼插槽可以設定預設值,定義了不使用就會使用預設值, 如果沒有名字的標籤的標籤預設會放到default(即匿名插槽)