【Vue】—插槽的基本语法

【Vue】—插槽的基本语法

<template>
  <div>
    <h1>这是父级</h1>
    <Son>
      <div>
        <p>name:插槽</p>
        <p>info:子级组件需要接收我，使用slot</p>
      </div>
    </Son>
  </div>
</template>

<script>
  import Son from './Son';
  export default {
    components: {
      Son
    }
  }
</script>

<style>

</style>

<template>
    <div>
        <h3>这是子级组件</h3>
        <!-- slot标签：接收插槽内容 -->
        <slot></slot>
    </div>
</template>

<script>
    export default {

    }
</script>

<style>

</style>

<template>
  <div>
    <h1>这是父级</h1>
    <Son>
      <div>
        <p>name:插槽</p>
        <p>info:子级组件需要接收我，使用slot</p>
        <p>{{count}}</p>
        <button @click='clickme'>点我一下</button>
      </div>
     <template v-slot:head>
<div>
  <h2>这是头部</h2>
</div>
     </template>
<template v-slot:foot></template>
<div>
  <span>这是尾巴</span>
</div>
    </Son>
  </div>
</template>

<script>
  import Son from './Son';
  export default {
    data() {
      return {
        count: 99
      }
    },
    components: {
      Son
    },
    methods: {
      clickme() {
        console.log('点点点');
      }
    }
  }
</script>

<style>

</style>

<template>
    <div>
        <h3>这是子级组件</h3>
        <!-- slot标签：接收插槽内容 -->
      <div>
          <slot class="head">
<slot name='head'></slot>
          </slot>
      </div>
      <div class="moren">
          <!-- 匿名插槽 -->
          <slot></slot>
      </div>
      <div class="foot">
          <slot name='foot'></slot>
      </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 55
            }
        },

        methods: {
            clickme() {
                console.log('son son son');
            }
        }
    }
</script>

<style>

</style>