具名插槽的使用
需求:替换中间插槽的内容
将第一个插槽的内容替换为返回按钮
笔记完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="xiaonaihu" />
<meta name="generator" content="HBuilder X" />
<title>具名插槽的使用</title>
<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- <cpn></cpn> -->
<cpn><span slot="center">标题</span></cpn>
<cpn><button slot="left">返回</button></cpn>
</div>
<template id = "cpn">
<div>
<slot name = "left"><span>左边</span></slot>
<slot name = "center"><span>中间</span></slot>
<slot name = "right"><span>右边</span></slot>
</div>
</template>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message:"hello vue"
},
components: {
cpn: {
template:'#cpn'
}
}
});
</script>
</body>
</html>