slot 插槽的使用

在vue 中父组件中的子组件在子组件中添加内容（html标签、文本内容），在子组件中加入slot这样页面中就会呈现出在父组件填写的内容，例如：

父组件中hello是子组件,在子组件中插入slot这样子组件呈现在页面中就会将父组件中插入子组件的内容都显示出来

<template>
  <div id="app">
    <Hello :list ="list"
           @delete="handleDelete"
           @
    ><h1>zhenghaixin</h1></Hello>
    <router-view/>
  </div>
</template>

<template>
  <div class="hello">
    <p>hello</p>
    <slot></slot>
  </div>
</template>
具名插槽：在父组件中属性slot写入插槽的名字，在子组件中name属性和父组件的插槽名字相同，这样就在子组件中就不会出现相同的内容，例如
父组件：在这里slot分别定义了header 和footer

<template>
  <div id="app">
   <Hello>
   <div class="header" slot="header">header</div>
      <div class="footer" slot="footer">footer</div>

    </Hello>
    <router-view/>
  </div>
</template>
子组件中：两个slot 中name属性值和父组件的slot属性值是一样的，这样就不会出重复的内容

<template>
  <div class="hello">
    <slot name = header></slot>
    <slot name="footer"></slot>
  </div>

</template>
作用域插槽：在子组件的dom结构由父组件传递过来的决定，如果是li标签渲染的就是li标签渲染内容，如果是h1标签内容就是用h1标签渲染的，例如本例就是用h1标签渲染的
父组件：

<template>
  <div id="app">
      <template slot-scope ="props">
        <h1>{{props.item}}</h1>
      </template>
    </Hello>
    <router-view/>
  </div>
</template>
子组件：

<template>
  <div class="hello">
    <ul><slot v-for="item of arry":item="item" ></slot></ul>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
     
      arry:[1,2,3,54]
    }
  }
}