我们学了插槽 发现组件化开发复用性很高。
我们拿上面说过的一个代码 讲解下 具名插槽solt:
就是说 这个cpn组件 他 是有两个插槽的,因为在调用的时候 ,里面写了代码,所以 他们两个插槽的值都会是 调用cpn时的 代码。
如果要这么一个场景: 一个组件有若干插槽,每个插槽的值有些一样 有些不一样【即 和某东那个导航栏一样】
如上图代码就不可能完成,因为cpn组件的插槽无论多少个也好,都会一样,所以:
描述: 只要给slot元素一个name属性即可,例:<slot name='myslot'></slot> ,当你要改变 这个插槽的值的时候 你就在需要改变插槽的代码 加上 slot属性,值对应slot标签的 name即可:
例: 模仿导航栏 ,左边 中间 右边:然后改变对应插槽的内容:
<body>
<template id="cpn">
<!--下面是3个插槽 而且有 插槽默认值-->
<div>
<slot name = "left"><span>左边</span></slot>
<slot name = "center"><span>中间</span></slot>
<slot name = "right"><span>右边</span></slot>
</div>
</template>
<div id="app">
<!--重点在这里,你想改某个插槽中的值,按照下面改法(加slot属性)即可-->
三个都改:
<cpn>
<button slot="left"><</button>
<input slot="center" type="text" placeholder="键入搜索">
<button slot="right">≡</button>
</cpn>
<br>
单改一个:
<cpn>
<input slot="center" type="text" placeholder="键入搜索">
</cpn>
<br>
都不改:
<cpn></cpn>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
components:{
'cpn':{
template:"#cpn",
}
}
})
</script>
</body>
就按照上面代码改 非常方便,这就是 插槽的魅力呀~
很好懂.