<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.js"></script>
</head>
<body>
<div id="box">
<!-- 自定义的组件还是得在Vue的作用域里才能生效哦 -->
<quan-ju>这里输入的内容就是slot的内容,若模板内的slot标签有内容,那么这些输入的内容就会直接被现在这里的信息覆盖</quan-ju>
<ju-bu>在自定义标签内输入了内容则不会显示模板内的文字，显示此文字</ju-bu>
<juming>
<!-- 对应网页元素直接调用定义的具名槽口 -->
<div slot="tou">具名槽口头部填充值</div>
<div slot="shen">具名槽口身体填充值</div>
<div slot="jiao">具名槽口脚步填充值</div>
</juming>
</div>
<!-- 自定义组件,一定要用网页元素标签包裹起来！全局组件 -->
<template id="tt"><div>
<p>这是头部</p>
<p>这是尾部</p>
<!-- 匿名插槽 -->
<slot>slot的默认值</slot>
</div></template>
<!-- 自定义组件,局部 -->
<template id="tt2"><div>
<p>这是局部组件的头部</p>
<p>这是局部组件的尾部</p>
<slot>slot的默认值</slot>
</div></template>
<!-- 具名槽口 -->
<template id="tt3"><div>
<slot name="tou">头部默认值</slot>
<slot name="shen">身体默认值</slot>
<slot name="jiao">脚步默认值</slot>
</div></template>
<script type="text/javascript">
//全局组件
Vue.component("quanJu",{
template:"#tt"
});
//局部组件匿名插槽
var vm=new Vue({
el:"#box",
components:{
"juBu":{
template:"#tt2",
},
"juming":{
template:"#tt3"
}
}
});
</script>
</body>
</html>
5974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
