插槽的基本使用（匿名插槽）

1.新建一个.vue文件

DialogWin.vue文件

//在这个文件中放了一个slot占位符
<template>
  <div>
    <div>头部</div>
    <div>
     //匿名插槽
        <slot>     
                      <h1>这是一个后备内容，当没有内容传入这个插槽的时候，此行才会显示</h1>
                </slot> 
                <slot></slot> 
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

2.App.vue

在另一个文件中引入这个文件并挂在，标签中写入了要占位的内容，此时在另一个.vue文件就会显示出来

<template>
  <div id="app">
    <dialog-win>
      123
      <button></button>
      <p>123</p>
    </dialog-win>
  </div>
</template>

<script>
import DialogWin from './components/DialogWin.vue'
export default {
  name: 'App',
  components: {
    DialogWin
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>