来源于技术胖的视频讲解
slot是标签内容的扩展，可以在自定义组件时传递给组件内容，组件接受并输出
<!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>slot</title>
<script src="../assets/js/vue.js" type="text/javascript"></script>
</head>
<body>
<h1>slot</h1>
<hr />
<div id="app">
<cat>
<span slot="name">{{catInformation.name}}</span>
<span slot="father">{{catInformation.father}}</span>
<span slot="address">{{catInformation.address}}</span>
</cat>
</div>
<template id="tep">
<div>
<p>姓名：<slot name="name"></slot></p>
<p>母亲：<slot name="father"></slot></p>
<p>住址：<slot name="address"></slot></p>
</div>
</template>
<script>
var catt={
template:'#tep'
}
var app = new Vue({
el:'#app',
data:{
catInformation:{
name:'哪吒',
father:'李靖',
address:'陈塘关'
}
},
components:{
'cat':catt
}
})
</script>
</body>
</html>
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
