vue Slot插槽的使用

官方文档 https://cn.vuejs.org/v2/guide/components-slots.html

先上代码
父组件
<template>
  <div class="view-container">
    <div class="zs">
      <p>我是父组件</p>
      <HD :name="'1223'" :jk="jk" #default="user">
        <p>{{ user }}</p>
        <!-- <p>我还是默认插槽的内容</p>
        <template slot="t">
          <p>命名插槽</p>
        </template>
        <p>我是默认插槽</p>
        <template slot="number" slot-scope="jw">
          <p>哇哈哈{{ jk }}</p>
          <h1 @click="ho">{{ jw.jw }}</h1>
        </template>
        <template v-slot:hj="slotProps">
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> -->
      </HD>
    </div>
  </div>
</template>

<script>
import HD from "./hd"
export default {
  data () {
    return {
      jk: '我是父组件的只'
    }
  },

  computed: {},
  beforeMount () {

  },
  mounted () { },

  methods: {
    ho () {
      console.log(jw)
      console.log('我是父组件的事件')
    }
  },
  components: {
    HD
  }
}
</script>
<style lang="scss" scoped>
@import './index';
</style>


子组件


<template>
  <div class="child">
    <!-- <h1>我是子组建{{ name }}</h1>
    <slot name="t"></slot> -->
    <slot :user="jk" />
    <!-- <slot name="number" :jw="jk" />
    <slot name="hj" v-bind:user="jk"></slot> -->
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      jk: '我是子组建的jk'
    }
  },
  watch: {

  },
  mounted () { },
  methods: {
    ho () {
      console.log('我是子组件的事件')
    },
    handleChange (value) {
      this.$emit('change', value)
    },

  }
}
</script>


<style lang="scss" scoped>
.child {
  width: 100%;
  border: 1px solid red;
}
</style>

 

 

 

　　

正文

　1. 默认插槽适用方式

　　　父组件

<HD >
        <p>我还是默认插槽的内容</p>
</HD>

 

　　子组件

<template>
  <div class="child">
    <slot />
  </div>
</template>

 

　　2. 具名插槽

　　　　父组件 2.6之前写法

      <HD>
        <p>我还是默认插槽的内容</p>
        <template slot="t">
          <p>命名插槽</p>
        </template>
        <p>我是默认插槽</p>
      </HD>
    

 

　　子组件

  <div class="child">
  <h1>我是子组建{{ name }}</h1>
    <slot name="t"></slot> 
　　<slot></slot>
  </div>

 

　　　2.6.0 版本之后    slot slot-scope(子向父传值)都被废弃   同意使用v-slot      

　　父组件

　　　　

   <HD >
        <template v-slot:t>
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> 
      </HD>

 

　　3.传值

　　　向子插槽传值 就是父子组件传值·

　　　　子向父传值

　　　　slot-scope 已经废弃的用法

             

  父组件

  <template slot="number" slot-scope="jw">
          <p>哇哈哈{{ jk }}</p>
  </template>

子组件
  
<div class="child">
   <h1>我是子组建{{ name }}</h1>
    <slot name="number" :jw="jk" />
</div>

　　　最新玩法

  <HD :name="'1223'" >
        <template v-slot:hj="slotProps">
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> -->
      </HD>

　简写

简写
 <HD >
        <template #hj="slotProps">
          <h2>kjkjjk</h2>
          <p>{{ slotProps }}</p>
        </template> -->
 </HD>

    

值可以解构 追加

 <HD  >
        <template #hj="{user}">
          <h2>kjkjjk</h2>
          <p>{{ user}}</p>
        </template> -->
      </HD>

重命名
 <HD  >
        <template #hj="{user：personal}">
          <h2>kjkjjk</h2>
          <p>{{ user}}</p>
        </template> -->
      </HD>

追加
 <HD  >
        <template #hj="{user：personal,name:'zs'}">
          <h2>kjkjjk</h2>
          <p>{{ user}}</p>
        </template> -->
      </HD>

定义默认内容 也就是当子组件插槽没传值的时候
v-slot="{ user = { firstName: 'Guest' } }"

动态插槽命名
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

 

默认插槽简写

当只有默认插槽  

当前组件上写
父组件

      <HD  v-slot="user">
        <p>{{ user }}</p>
      </HD>

子组件

<div class="child">
    <slot v-bind:user="jk" />
  </div>



简写父组件 默认插槽 将参数写在父组件上  必须带上default

   <HD  #defalut="user">
        <p>{{ user }}</p>
   </HD>

 

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

 

遇事不懂 官方文档