插槽的基本使用
插槽可以大大提高组件的可复用性
定义插槽的一大关键字是slot
在组件模板定义中，可以定义<slot></slot>，这样一来，slot标签便可以被替换
<slot></slot>也可定义默认的数据，这样在没有替换时便会显示默认的数据
slot还有一个关键属性：name，用来唯一区分每个slot。如果不设置name属性，那么就会有一个默认的name：default
在调用组件时，如果没有使用v-slot（语法糖：#）绑定slot，那么默认替换的便是没有定义name属性的slot
注意：在一般情况下，使用v-slot绑定时，需要在template中定义；只有在只有一个默认插槽的情况下才可以直接在组件标签上定义
<body>
<div id="app">
<cpn>
<button>touch me!</button>
</cpn>
<cpn>
<template #header>
<h1>replace header</h1>
</template>
</cpn>
<cpn>
<template #footer>
<h1>replace footer</h1>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot>default slot</slot>
<header>
<slot name="header">default header</slot>
</header>
<footer>
<slot name="footer">default footer</slot>
</footer>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
components: {
cpn: {
template: `#cpn`
}
}
});
</script>
</body>
作用域插槽
很多时候需要从父组件中使用子组件的数据，这个时候就需要作用域插槽
简单来说，作用域插槽就是获取子组件的数据
这个过程和组件props很相似，只是语法不同
下面这张图很清晰的解释了数据的调用过程
在上图中，v-slot还可以写成slot-scope，效果是相同的
在调用时，结合基本使用中的name属性可以发现，default是因为没有给slot设置name属性，所以才使用default。那么如果设置了name属性是不是就可以更改default呢，实际操作发现这样是可以的
<body>
<div id="app">
<cpn>
<template #movie="slotProps">
{{slotProps}}
</template>
</cpn>
</div>
<template id="cpn">
<!-- <ul>-->
<!-- <li v-for="item in movies">-->
<!-- <slot :item="item"></slot>-->
<!-- </li>-->
<!-- </ul>-->
<div>
<h1>this is props</h1>
<slot name="movie" :movies="movies"></slot>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
components: {
cpn: {
template: `#cpn`,
data() {
return {
movies: ['星际穿越', '千与千寻', '哈利波特', '志明与春娇']
}
}
}
}
});
</script>
</body>
标签：slot,name,default,插槽,--,组件 来源： https://www.cnblogs.com/JSW79/p/15245681.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。