slot分发内容

一、slot定义

中文插槽，混合父组件的内容与子组件自已模板的方式
其中 Vuejs 把 slot 元素作为原始内容的插槽

二、编译作用域

//父组件
<div id="app">
<my-component>{{msg}}</my-component>
</div> //msg绑定到是父组件的内容

//子组件
...
components:{
  'my-component':{
    template:'<div></div>'    
   }    
}
...

小总结：
父组件模板内容在父组件作用域内编译
子组件模板内容在子组件作用域内编译

三、slot用法

1､单个插槽

//html
...
<my-component>我是父组件内容</my-component>

//js
...
template:'<div>\
    <slot>\
    如果没有内容显示，默认是我\
    </slot>\
</div>'
...

2､具名插槽

//html
...
具名插槽（有具体名字的插槽）: 视图不变，数据变
<name-component>
  <h3 slot="header">我是标题</h3>
  <p>我是正文内容</p>
  <p>正文内容有两段</p>
  <p slot="footer">我是底部信息</p>
</name-component>
//js
...
'name-component':{
    template:'<div>\
                <div class="header">\n' +
                '        <slot name="header">' + //取出name是 header 对应的内容
                '</slot>\n' +
                '    </div>\n' +
                '    \n' +
                '    <div class="container">\n' +
                '        <slot>' + // 没加 name 会把默认的取回来
                '</slot>\n' +
                '    </div>\n' +
                '\n' +
                '    <div class="footer">\n' +
                '        <slot name="footer">' + //取出name是footer对应的内容
                '</slot>\n' +
                '    </div>' +
                '</div>' 
     }
}

【Demo实例https://jsbin.com/jijelop/edit?html,output】

四､作用域插槽

使用一个可以复用的模板来替换已经渲染的元素(从子组件中获取数据)
注：template模板不会被渲染，渲染的是template标签内的内容 (v2.5.0版本之前)

//html
...
<my-component>
   <template slot="abc" slot-scope="prop">
     {{ prop.text}}
    </template>   

    //v2.5.0版本后,可在别的标签(比如p,span,div等)上用 slot,slot-scope，并渲染标签
    <p slot="abc" slot-scope="prop"> 
        {{prop.text}}
    </p>
 </my-component>

//js
...
components:{
   'my-component':{
      template:'<div>\
            <slot text="我是来自子组件" name="abc">\
            </slot>\
      </div>'//在子组件定义一个slot，写上要传递的数据
    }
 }

【Demo实例https://jsbin.com/hawodox/edit?html,output】

五、访问slot

通过 this.$slots.name 访问

//html
...
<name-component>
    <h3 slot="header"><span>我是标题</span></h3>
</name-component>

//js
...
mounted:function(){
// 访问插槽
 var header = this.$slots.header 
 var text = header[0].elm.innerText
 var html = header[0].elm.innerHTML
 console.log(header)
 console.log(text)
 console.log(html)
}  

【Demo实例https://jsbin.com/zarewac/edit?html,console,output】

六、组件高级用法-动态组件

component元素 （vue 提供）

1､作用

动态挂载不同组件

2､实现

使用is属性实现

//html
...
<button @click="handleView('A')">第1句</button>
<button @click="handleView('B')">第2句</button>
<button @click="handleView('C')">第3句</button>
<button @click="handleView('D')">第4句</button>


//js
...
components:{
        'compA':{
            template:'<div>离离原上草</div>'
        },
        'compB':{
            template:'<div>一岁一枯荣</div>'
        },
        'compC':{
            template:'<div>野火烧不尽</div>'
        },
        'compD':{
            template:'<div>春风吹又生</div>'
        }
 },
 methods:{
        handleView:function(tag){
            this.thisView = 'comp' + tag
        }
 }
 data:{
        thisView:'compA'
 }

【Demo实例 https://jsbin.com/gocarif/edit?html,output】