作用域插槽
作用域插槽是一种特殊的slot&＃xff0c;使用一个可以复用的模板替换已渲染元素。
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"ie&＃61;edge"><script src&＃61;"https://unpkg.com/vue/dist/vue.js">script><title>作用域插槽title>
head>
<body><div id&＃61;"app"><child-component><template scope&＃61;"props"><p>来自父组件的内容p><p>{{props.msg}}p>template>child-component>div><script>Vue.component(&＃39;child-component&＃39;,{template: &＃39;\\\
&＃39;});var app &＃61; new Vue({el: &＃39;#app&＃39;});script>
body>
html>
在元素上有一个类似props传递数据给组件的写法msg&＃61;“xxx”&＃xff0c;将数据传到了插槽。父组件中使用了元素&＃xff0c;而且拥有一个scope&＃61;“props"的特性&＃xff0c;这里的props只是一个临时变量&＃xff0c;就像v-for&＃61;”item in items“里面的item一样。template内可以通过临时变量props访问来自组件插槽的数据msg。
上面的例子最终渲染结果为&＃xff1a;
<div id&＃61;"app"><div class&＃61;"container"><p>来自父组件的内容p><p>来自子组件的内容p>div>
div>
作用域插槽更具代表性的用例是列表组件&＃xff0c;允许组件自定义应该如何渲染列表每一项&＃xff1a;
<div id&＃61;"myApp"><my-list :books&＃61;"books"><template slot&＃61;"book" scope&＃61;"props"><li>{{props.bookName}}li>template>my-list>
div>
<script>Vue.component(&＃39;my-list&＃39;,{props: {books: {type: Array,default: function () {return [];}}},template: &＃39;\&＃39;});var myApp &＃61; new Vue({el: &＃39;#myApp&＃39;,data: {books: [{name: &＃39;C&＃39;},{name: &＃39;C&＃43;&＃43;&＃39;},{name: &＃39;Java&＃39;}]}});
script>
子组件my-list接收一个来自父级的props数组books&＃xff0c;并且将它再name为book的slot上使用v-for循环&＃xff0c;同时暴露一个变量bookName。
访问slot
Vue.js 2.x提供了用来访问被slot分发的内容的方法 $slots 。
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"ie&＃61;edge"><script src&＃61;"https://unpkg.com/vue/dist/vue.js">script><title>访问slottitle>
head>
<body><div id&＃61;"app"><child-component><h2 slot&＃61;"header">标题h2><p>正文内容p><p>更多正文内容p><div slot&＃61;"footer">底部信息div>child-component>div><script>Vue.component(&＃39;child-component&＃39;,{template: &＃39;\&＃39;,mounted: function () {var header &＃61; this.$slots.header;var main &＃61; this.$slots.default;var footer &＃61; this.$slots.footer;}});var app &＃61; new Vue({el: &＃39;#app&＃39;});script>
body>
html>
通过$slots可以访问某个具名slot&＃xff0c; this.$slots.default包括了所有没有被包含在具名slot中的节点。
京公网安备 11010802041100号