vue中slot的简单使用

父组件

<template>
  <div id="app">
    <children>
      <div slot="slot1">标题</div>
      <div slot="slot2"><input type="text"></div>
      <button slot="slot3"  slot-scope="data">{{ data.msg }}</button>
    </children>
  </div>
</template>
<script>
  import Child from "./components/child.vue";
  export default {
    name: 'hello',
    components: {
      children: Child
    }
  }
</script>

子组件

<template>
  <div class="content">
    <slot name="slot1"></slot>
    <slot name="slot2"></slot>
    <slot name="slot3" :msg="msg"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "你好"
    };
  }
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-between;
}
</style>

slot：插槽，占位
slot-scope=“data”：取值