【Vue】—插槽的基本语法

桃扇骨 2022-09-04 00:53 11阅读 0赞

## 【Vue】—插槽的基本语法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]

<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>
        </div>
    </template>
    
    <script>
        export default { 
    
        }
    </script>
    
    <style>
    
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][a91b3e722e934fe98035c2b5d2a4356b.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 6]

<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>
            
          <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 11]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]: /images/20220829/d34c724479e84460a5f5230ce3aa8fe9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]: /images/20220829/d4f38f9c21364ca986aff4e2825b0298.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]: /images/20220829/aa5d3e26592641e1bf74a12f2846c2f2.png
[a91b3e722e934fe98035c2b5d2a4356b.png]: /images/20220829/f7b7ca4c832a49f7aabf90f7fa5b9540.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]: /images/20220829/202864428e7a4b64970dd75993978230.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 4]: /images/20220829/0db4ff9aebfd4067bf3fa8dae5abf84a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 5]: /images/20220829/871866a3a4a04dfeb32fbfd5e0b5398e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 6]: /images/20220829/5470d88a8647499ca8617f38742ab7ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 7]: /images/20220829/adb5fa0328f94a8cad720b612806bc1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 8]: /images/20220829/134fae15f60e49baad5365f2828e062e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 9]: /images/20220829/e44a96ce0344476cabe90dfe58609421.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 10]: /images/20220829/6222096eb8384119bcac189ed8453ba4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 11]: /images/20220829/eed5a985ea70452c8860c1ee99518c28.png