20201027岳浩天

具名插槽

<template>
  <section>
    <my-list>
      <template v-slot:header>name：header具名插槽</template>
      <div>内容被放到默认插槽中</div>
    </my-list>
  </section>
</template>

<script>
  export default {
    components: {
      myList: {
        template: `<div>
               <slot name="header"></slot>
               <slot></slot>
           </div>`
      }
    },
  }
</script>

作用域插槽

slot-scope:父组件可以获取子组件中携带的数据

父组件：

<div id="#app">
         <子组件>
             <template slot-scope="接收子组件传递过来的数据的变量名">
                 <p>{{变量名}}</p>
             </template>
             </子组件>
</div>

子组件：

<子组件>

   <div>

​    <slot :传递给父组件的变量名="变量名"></slot>

  </div>

</子组件>

v-slot

父组件：

<div id="#app">
    <子组件>
        <template v-slot:名字>
            slot 的传递内容
        </template>
        </子组件>
</div>

子组件：

<子组件>

<slot name="名字"><slot>

</子组件>

心得

今天学了点webpack，版本问题造成的错误，让我心态炸开

在cli搭建的项目里开发还得多练练.