匿名的slot 用法
- slot其实就是父组件传递的DOM结构
- vue 提供的内置组件 <slot></slot>
slot动态的DOM, props是动态的数据
<!DOCTYPE html>
<html>
<head>
<title>slot</title>
<style type="text/css">
li {
list-style: none;
float: left;
width: 33%;
background-color: yellowgreen;
border: 1px solid black;
height: 150px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//定义全局组件MyLi
// slot 是留坑，外部插入html内容
var MyLi = {
template:`<li>
<slot></slot>
</li>`,
};
Vue.component('my-li',MyLi);
//总结：slot其实就是父组件传递的DOM结构
// vue 提供的内置组件 <slot></slot>
// <my-li> <button>xxxx</button></my-li>
//入口组件：实现一个九宫格
var App = {
template:`
<div>
<ul>
<my-li><h2>111</h2></my-li>
<my-li><button>2222</button></my-li>
<my-li>3</my-li>
<my-li>4</my-li>
<my-li><button>5555</button></my-li>
<my-li>6</my-li>
<my-li><h1>7777</h1></my-li>
<my-li>8</my-li>
<my-li><button>9999</button></my-li>
</ul>
</div>
`,
data:function(){
return {
myText:'',
}
},
};
new Vue({
el:'#app',
components:{
app:App,
},
template:'<app/>'
});
</script>
</body>
</html>
带名称的slot 用法
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>带名称的slot</title>
<style type="text/css">
/*li {
list-style: none;
float: left;
width: 33%;
background-color: yellowgreen;
border: 1px solid black;
height: 150px;
}*/
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//定义全局组件MyLi
// slot 是留坑，外部插入html内容
var MySlot = {
template:`<div>
<slot name = 'one'></slot>
<hr>
<slot name = 'two'></slot>
</div>`,
};
Vue.component('my-slot',MySlot);
//总结：slot其它就是父组件传递的DOM结构
// vue 提供的内置组件 <slot></slot>
//入口组件：实现一个九宫格
var App = {
template:`
<div>
<my-slot>
<h1 slot="one">第一个槽</h1>
<h2 slot="two">第二个槽</h2>
</my-slot>
</div>
`,
data:function(){
return {
myText:'',
}
},
};
new Vue({
el:'#app',
components:{
app:App,
},
template:'<app/>'
});
</script>
</body>
</html>
