vue组件4 利用slot将内容传递给组件

除了将数据作为prop传入到组件中，vue也允许传入HTML

父组件中的子组件：<custom-button>点我<custom-button/>

custom-button子组件：<span> <slot></slot> </sapn>

会生成<span>点我</span>

不仅可以传入字符串，也可以传入你想要的任何html,甚至是其他组件，这样可以创建复杂的页面，而不至于让组件的体积变得过于庞大

默认内容

如果solt元素设置了默认内容，那么该内容会在组件没有接收到内容时被当作默认内容使用

具名插槽

上面我们说所的是单个插槽，这是插槽最普遍的用法，当然也是最容易理解的，传递给组件的内容会替换掉它里面的slot元素输出到页面上。

除此之外我们还有具名插槽。具名插槽，它允许你在同一个组件中拥有多个插槽

<HelloWorld msg="Welcome to Your Vue.js App" :input="input">
      <button>hah</button>
      <div slot="header"> <span style="color:red">哈哈</span> </div>
    </HelloWorld>

子组件

<span>这里 <slot name="header"></slot>
     </span>

会生成

这里
哈哈

我们指定了某个元素应该被插入名为header 的插槽 其他的将被插入未命名的插槽

作用域插槽

可以将数据传回slot组件，使父组件中的元素可以访问子组件中的数据

//创建一个获取用户信息的组件,而数据的显示则留给父级元素来处理
    Vue.component('user-data',{
      template:" <div class='user'> <solt :user='user'>  </slot> </div> ",
      data:()=>({
      user:"test"
      }),
      mounted(){
        //设置this.user
      }
    })

任何传递给slot的属性都用slot-scope属性中定义的变量来获取

<div>
    <user-data >

　　　　 <template v-slot="user">//v-slot='user'===slot-scope="user" v-slot为官方最新语法        　　

用户名：

{{user.user.name}}

      　</template>

    </user-data>
</div>

插槽作用域结构

解构slot-scope的属性就像解构函数参数一样 使用{}解构