使用模板能增加代码的复用性，大量节约代码，<slot></slot>中间的内容是代表可以被替换的
方案一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div class="main">
<custom>
<div>我是替换文字</div>
</custom>
</div>
<script>
Vue.component("custom",{
template:`
<div>
<slot>
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
</slot>
</div>
`
});
</script>
</body>
</html>
方案二：
根据slot的名字来进行替换内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div class="main">
<custom>
<span slot="c">我替换c</span>
<span slot="b">我替换b</span>
<span slot="a">我替换a</span>
</custom>
</div>
<script>
Vue.component("custom",{
template:`
<div>
<slot name="a"><p>我是内容1</p></slot>
<slot name="b"><p>我是内容2</p></slot>
<slot name="c"> <p>我是内容3</p></slot>
</div>
`
});
var vm=new Vue({
el:".main"
})
</script>
</body>
</html>