有时为一个插槽设置默认内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中：
<button type="submit"> <slot></slot> </button>
我们可能希望这个 <button> 内绝大多数情况下都渲染 “Submit” 文本。为了将 “Submit” 作为默认内容，我们可以将它放在 <slot> 标签内：
<button type="submit"> <slot>Submit</slot> </button>
现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：
<submit-button></submit-button>
默认内容 “Submit” 将会被渲染：
<button type="submit">Submit</button>
但是如果我们提供内容：
<submit-button>Save</submit-button>
则这个提供的内容将会被渲染从而取代后备内容：
<button type="submit">Save</button>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<!-- 使用 CDN 引入 Vue 库 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用默认值 -->
<submit-button></submit-button>
<!-- 使用自定义值 -->
<submit-button>Save</submit-button>
</div>
<script type="text/javascript">
Vue.component('submit-button', {
template: `
<p>
<button type="submit">
<slot>Submit</slot>
</button>
</p>
`
});
var app = new Vue({
el: "#app",
data: {}
});
</script>
</body>
</html>运行效果图：
川公网安备51010802032098
