<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 内置组件 -slot讲解</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue 内置组件 -slot讲解</h1>
<hr>
<div id="app">
<whl>
<span slot="bolgUlr">{{whlData.bolgUlr}}</span>
<span slot="netName">{{whlData.netName}}</span>
<span slot="skill">{{whlData.skill}}</span>
</whl>
</div>
<template id="tep">
<!--vue 模板 必须有个大的容器包含着 才能显示完整-->
<div>
<p>博客地址: <slot name="bolgUlr"></slot> </p>
<p>网名:<slot name="netName"></slot></p>
<p>所会技术:<slot name="skill"></slot></p>
</div>
</template>
</body>
</html>
<script>
var whl={
template:"#tep"
}
var app = new Vue({
el:'#app',
data:{
whlData:{
bolgUlr:'https://blog.csdn.net/drug_',
netName:'whl',
skill:'web前端'
}
},
components:{
'whl':whl,
}
})
</script>