vue之插槽

 基本定义使用

注意:默认使用default的名称
1.子组件中定义

    <slot name="插槽命名"></slot>

2.App.vue中使用
  <Left>
      <template v-slot:插槽名称>

        <p></p>

     </template>
</Left>
3.v-slot 简写#

 传值

 <!-- 文章的内容 -->
子组件：
    <div class="content-box">

      <!-- 在封装组件时，为预留的 <slot> 提供属性对应的值，这种用法，叫做 “作用域插槽” -->
      <slot name="content" msg="hello vue.js" :user="userinfo"></slot>
    </div>


App.vue
   <article>
       <template #content="obj">
         <p>{{obj.msg}}</p>
        </template>
</article>

 

 

子组件:
    
   <!-- 文章的内容 -->
    <div class="content-box">
      <!-- 在封装组件时，为预留的 <slot> 提供属性对应的值，这种用法，叫做 “作用域插槽” -->
      <slot name="content" msg="hello vue.js" :user="userinfo"></slot>
    </div>

    <script>
export default {
  // 首字母要大写
  name: 'Article',
  data() {
    return {
      // 用户的信息对象
      userinfo: {
        name: 'zs',
        age: 20
      }
    }
  }
}
</script>


App.vue
     1.

          <template #content="scope">

             <div>

               <p>{{ scope}}</p>

               <p>{{ scope.user}}</p>

             </div>

           </template>

 

     2.

          <template #content="{{msg,user}}">

             <div>

               <p>{{ msg}}</p>

               <p>{{ user.name}}</p>

             </div>

           </template>