0
点赞
收藏
分享

微信扫一扫

Vue 插槽(slot)使用


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 具名插槽使用(导航)

<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>

Vue 插槽(slot)使用_vue.js

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 具名插槽使用(导航)

<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>

Vue 插槽(slot)使用_vue.js

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>

gitee:

​​https://github.com/courageSteak/vue-framework​​


举报

相关推荐

0 条评论