插槽的使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<cpn><button>案例</button></cpn>
<cpn><span>哈哈</span></cpn>
<cpn>
<i>这是斜体</i>
<h4>我是四级标题</h4>
<div>我是div，我们三个都会被替换</div>
</cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<br />
<h2>我是组件</h2>
<p>我是组件，哈哈哈</p>
<slot><button>案例</button></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
},
components: {
cpn: {
template: "#cpn",
},
},
})
</script>
</body>
</html>
1.什么是插槽
在使用子组件的时候，想往子组件里面加一些东西，比如是一个按钮或者是一个标题，就要用到插槽。
2.插槽怎么使用
事先在子组件中预留一个位置，可以放入父组件传来的元素。
代码如下：
<template id="cpn">
<div>
<br />
<h2>我是组件</h2>
<p>我是组件，哈哈哈</p>
<slot><button>案例</button></slot>
</div>
</template>
此时，子组件传来的内容就会放到slot标签所在位置。
如图所示：
注意slot标签里面的内容是默认内容，即如果父组件没有传来任何东西，则slot标签里面的内容将会占据该位置。
如图所示：
第一次记录自己的学习笔记，如果您发现问题，欢迎指点。