Vue v-slot插槽 （vue-cli）

App.vue

<template>
  <div id="app">
    <!-- slot已过时
     <A>
      <div slot="a">
        <h2>{{msg1}}</h2>
      </div>
      <div slot="b">
        <h2>{{msg2}}</h2>
      </div>
    </A>-->
    <A>
      <!-- 
        1.这里的v-slot后面的值a,b可以随便取，子组件slot中的name要对应该值。
        2.还有msg1和msg2只能由当前的App.vue提供，不能由A.vue提供
        3.在template外写其他东西，是不会显示的。
      -->
      <template v-slot:a>
        <h2>{{msg1}}</h2>
      </template>
      <!-- 添加scope后，子组件可以传值向父组件传值 -->
      <template v-slot:b="scope">
        <h2>{{msg2}}</h2>
        <h2>{{scope.msg33}}</h2>
      </template>
    </A>
  </div>
</template>

<script>
import A from "./components/A";

export default {
  name: "app",
  components: {
    A
  },
  data() {
    return {
      msg1: "23333",
      msg2: "666666"
    };
  }
};
</script>
<style scoped>
/* 关与CSS样式，虽然父组件和子组件都可以设置样式，同时设置，父组件会覆盖子组件的样式。看具体的情况设置样式。 */
h2 {
  background: #30b031;
}
</style>

A.vue

<template>
  <div class="a">
    <slot name="a" />
    <h1>Hello Vue</h1>
    <!-- 这里的msg33名字随意取 -->
    <slot name="b" :msg33="msg3" />
  </div>
</template>
<style scoped>
h2 {
  background: #f5c700;
}
</style>

效果:

v-slot插槽.png