1 为什么使用slot
组件的插槽
- 组件的插槽是为了让我们封装的组件更加具有扩展性。
- 让使用者可以决定组件内部一些内容到底展示了什么。
举例：
- 移动开发中，几乎每个页面都有导航栏
- 导航栏我们会分装成一个插件，比如nav-bar组件
- 一旦有了这个组件，我们就可以在多个页面中复用了
<!--
1. 插槽的基本使用 <slot></slot>
2.插槽的默认值：<slot>button</slot>
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->
<div id="app">
<cpn><button>按钮</button></cpn>
<cpn></cpn>
<cpn><span>标签</span></cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>666</p>
<slot><button>默认为按钮</button></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好，有勇气的牛排"
},
components: {
cpn: {
template: '#cpn'
}
}
})
</script>2 具名插槽使用（导航）
代码语言：html复制<div id="app">
<cpn><span slot="center">标题</span></cpn>
<cpn><button slot="center">标题</button></cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好，有勇气的牛排"
},
components: {
cpn: {
template: '#cpn'
}
}
})
</script>
具名插槽使用（导航）3 作用域插槽
- 父组件替换插槽的标签，但是内容由子组件来提供
<div id="app">
<cpn></cpn>
<cpn>
<!-- 目的是获取子组件中的pLanguages -->
<template v-slot="slot">
<span v-for="item in slot.data">{{ item }} * </span>
</template>
</cpn>
<cpn>
<!-- 目的是获取子组件中的pLanguages -->
<!-- .join 将数组，转为字符串 -->
<template v-slot="slot">
<span>{{ slot.data.join(' * ') }}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{ item }}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好，有勇气的牛排"
},
components: {
cpn: {
template: '#cpn',
data() {
return {
pLanguages: ['JavaScript', 'C ', 'Java', 'C#', 'Python']
}
}
}
}
})
</script>仓库地址：## 1 为什么使用slot
组件的插槽
- 组件的插槽是为了让我们封装的组件更加具有扩展性。
- 让使用者可以决定组件内部一些内容到底展示了什么。
举例：
- 移动开发中，几乎每个页面都有导航栏
- 导航栏我们会分装成一个插件，比如nav-bar组件
- 一旦有了这个组件，我们就可以在多个页面中复用了
<!--
1. 插槽的基本使用 <slot></slot>
2.插槽的默认值：<slot>button</slot>
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->
<div id="app">
<cpn><button>按钮</button></cpn>
<cpn></cpn>
<cpn><span>标签</span></cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>666</p>
<slot><button>默认为按钮</button></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好，有勇气的牛排"
},
components: {
cpn: {
template: '#cpn'
}
}
})
</script>2 具名插槽使用（导航）
代码语言：html复制<div id="app">
<cpn><span slot="center">标题</span></cpn>
<cpn><button slot="center">标题</button></cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好，有勇气的牛排"
},
components: {
cpn: {
template: '#cpn'
}
}
})
</script>3 作用域插槽
- 父组件替换插槽的标签，但是内容由子组件来提供
<div id="app">
<cpn></cpn>
<cpn>
<!-- 目的是获取子组件中的pLanguages -->
<template v-slot="slot">
<span v-for="item in slot.data">{{ item }} * </span>
</template>
</cpn>
<cpn>
<!-- 目的是获取子组件中的pLanguages -->
<!-- .join 将数组，转为字符串 -->
<template v-slot="slot">
<span>{{ slot.data.join(' * ') }}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{ item }}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好，有勇气的牛排"
},
components: {
cpn: {
template: '#cpn',
data() {
return {
pLanguages: ['JavaScript', 'C ', 'Java', 'C#', 'Python']
}
}
}
}
})
</script>
