Vue插槽的简单使用

Vue之slot(插槽)使用

slot的基本使用

1.1slot初识

正常情况下，我们在自定义组件标签中定义的任何内容，都会被抛弃。都只会渲染出组件模板内容。Slot可以把内容渲染进子组件。内容包括文本及标签，如下：

//html
　<div id="box">
    <temp><p>hello world!p>temp>
div>

//javascript
 Vue.component('temp',{
     
        template:`
组件1
       header
       
`
    })
    var v=new Vue({
     
        el:'#box'
    })

页面渲染结果：
　
　当然，slot可以给默认值，直接写在组件定义里面，如果使用组件标签的内部包含别的标签或文本，会覆盖默认值！

1.2具名slot

渲染顺序按照component里面slot的name顺序来渲染页面，无关页面里的组件名template渲染顺序。可以通过template渲染,使用v-slot属性(简写#)，能够按照需求使用组件的部分结构及内容。

//组件定义
   Vue.component('head-com',{
     
        template:`
头部
`
    })
    Vue.component('body-com',{
     
        template:`
内容
`
    })
    Vue.component('foot-com',{
     
        template:`
底部
`
    })
    Vue.component('outer',{
     
        template:`

        
        
        
       
`
    })
    var v=new Vue({
     
        el:'#box'
    })

<div id="box">
    <outer>
       <template #head>  //等价于v-slot:head
            <head-com>head-com>
       template>
        <template v-slot:foot>
            <foot-com>foot-com>
        template>
        <template v-slot:body>
            <body-com>body-com>
        template>
    outer>
div>

代码运行结果

注：v-slot:defult与不写slot等价，同时无名slot的内容会默认为组件标签里不加v-slot:名字的剩余部分。如果同时写了多个无名slot，内容就会渲染多次！

1.2.1动态插槽

<div id="box">
      <temp>
          <template v-slot:[myname]>
              <h1>testh1>
          template>
      temp>
div>

在vue实例的data中可以修改myname的值,达到动态改变插槽的目的。这里只要修改data里myname的值就能实现temp组件slot的改变。

//定义部分
 Vue.component('temp',{
     
        template:`

         body
         footer
          
header
        
`
    })
 var v=new Vue({
     
        el:'#box',
        data:{
     
            myname:'header'
        }
    })

1.2.2作用域插槽

要使组件里面的插槽能够使用组件本身的data数据,在插槽身上加上绑定一个属性，如：，#body=“obj”,obj代表组件在slot里传的数据对象（也就是组件里data的值），如下，obj就是info数组对象。

<div id="box">
      <temp>
          <template #body="obj">
             {
    {obj}}
              <ul>
                  <li v-for="item in obj.info">{
    {item}}li>
              ul>
          template>
      temp>
div>

//javascript
 Vue.component('temp',{
     
        template:`

         
        
`,
        data:function(){
     
            return {
     
                msg:['实名','注册','登录','盖章'],
            }
        }
    })
    var v=new Vue({
     
        el:'#box',
        data:{
     
            myname:'header'
        }
    })

注：v-slot 只能添加在一个