2.slot简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>插槽slot简单使用</h2>
<pre>
1.定义:通俗的来说就是html中的变量,你可以理解为html替换,他要实现的功能非常类型之前我们使用jquery的 $("#id").html('要替换的内容')
2.官方的定义大家自己百度
需求:
1. 定义一个组件;
2.组件内部的内容可以根据使用者替换
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<c-child1></c-child1>
-------------------------
<c-child1>
<div>父类替换你的值</div>
</c-child1>
</div>
<!--子组件模板1-->
<template id="child1id">
<div>
我是一个子组件
<div>
<slot>这是我的默认内容,使用者可以替换</slot>
</div>
</div>
</template>
<script>
let app = new Vue({
el: '#app',
// 组件
components: {
'c-child1': {
template: '#child1id',
}
}
})
</script>
</body>
</html>
View Code