<template>里面的代码
<template id="cpn">
<div>
<h2>插槽的使用</h2>
<slot name="left">左侧</slot>
<slot name="middle">中间</slot>
<slot name="right">右边</slot>
<slot></slot>
<slot><button>该插槽默认是这样默认</button></slot>
</div>
</template>1.
<div id="root">
<cpn><button>按钮</button></cpn>
</div> 此时只有<slot></slot>里面会插入“<button>按钮</button>”这个，另外几个命名或者有默认标签的不会再进行插入
效果：
2
.
<div id="root">
<cpn></cpn>
</div> <slot></slot>这个插件会不显示，而”<slot><button>该插槽默认是这样默认</button></slot>“这个会显示插槽里面的东西。
效果：
3.
<div id="root">
<cpn><h2 slot="middle">修改中间</h2></cpn>
</div> 只会把“<slot name="middle">中间</slot>”这个插槽里面的东西修改掉，其余还照常显示。
效果：
整体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<cpn><button>按钮</button></cpn>
<cpn></cpn>
<cpn><h2 slot="middle">修改中间</h2></cpn>
</div>
<template id="cpn">
<div>
<h2>插槽的使用</h2>
<slot name="left">左侧</slot>
<slot name="middle">中间</slot>
<slot name="right">右边</slot>
<slot></slot>
<slot><button>该插槽默认是这样默认</button></slot>
</div>
</template>
<script>
new Vue({
el:"#root",
data:{
},
components:{
cpn:{
template:"#cpn"
}
},
methods:{
},
computed:{
},
filters:{ //过滤器
}
})
</script>
</body>
</html>
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
