IDEA激活码
目录
1.引入
使用插槽的目的是让我们的组件更加有扩展性
让使用者决定组件内部的内容，决定展现什么
比如，移动网站中的导航栏
我们把导航栏封装成一个nav-bar组件
一旦有了这个组件，我们就可以在多个页面中复用了
但是，每个页面的组件会有共性，也会有自己的独特性
这个时候就要用到插槽了
我们这样封装组件：将共性抽取出来，将独特性暴露为插槽，在插槽中我们可以根据自己的需求决定插入什么内容
2.基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn><span>哈哈</span></cpn>
<cpn>
<i>生如逆旅</i>
<div>一苇以航</div>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<slot></slot>
<!-- slot标签里面可以加个默认值-->
<slot><button>按钮</button></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
components: {
cpn: {
template: `#cpn`,
}
}
})
</script>
</body>
</html>
3.给插槽添加name属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 找到对应的slot进行替换，-->
<cpn><button slot="left">返回</button><span slot="center">标题</span></cpn>
<!-- 对于那些有name的插槽，如果这里不指定是哪个slot，就不替换-->
<cpn></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 src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
components: {
cpn: {
template: `#cpn`,
}
}
})
</script>
</body>
</html>
