vue(13)在模板中使用slot插槽排序
序
Slot插槽
插槽就是父组件往子组件中插入一些内容。
有三种方式，默认插槽，具名插槽，作用域插槽
默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据
具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置。
作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。
实例代码
点击查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<Kissor>
<h3 slot="footer">这是页尾</h3>
<p>我爱学习</p>
<p>学习爱我</p>
<h1 slot="header">这是首页</h1>
</Kissor>
</div>
</body>
<script>
var am = Vue.extend({
template: `
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>`
})
Vue.component("Kissor", am)
var vm = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</html>
