1.之前的使用
父组件：
<template> <div> <child-component> <template scope="scope"> <p>{{ scope.parentValue }}</p> </template> </child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentValue: 'Hello, child!' }; } }; </script>
子组件 (ChildComponent.vue)：
<template> <div> <slot :parentValue="parentValue"></slot> </div> </template> <script> export default { data() { return { parentValue: '' }; } }; </script>
在上面的示例中，父组件使用标签包裹了一个标签，并在中定义了一个插槽。在插槽中，使用{{ scope.parentValue }}来显示父组件传递的值。
子组件中使用标签来定义插槽，并通过:parentValue="parentValue"将子组件中的parentValue属性传递给插槽。
通过这种方式，父组件可以将数据传递给子组件的插槽，并且子组件可以在中接收和使用这些数据。
slot
vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代
用于标记往哪个具名插槽中插入子组件内容。
<body> <div id="app"> <slot-test>插槽的使用</slot-test> </div> </body> <script> Vue.component('slot-test',{ template:`<div> <slot></slot> </div>` }); </script>
slot-scope
vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代
用于将元素或组件表示为作用域插槽。attribute 的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。
<div id="app"> <!-- 需求在视图上显示firstname的值在不改变组件的插槽内容 --> <!-- 1.在字符串模板中为需要访问的插槽绑定一个v-bind:自定义属性='要访问的数据' 2.在<template>标签中绑定指令v-slot或者slot-scope='自定义属性' --> <slot-test> <!-- 第一种v-slot 导入的vue文件必须是vue2.6.0以后的 --> <!-- <template v-slot="slotDate"> {{slotDate.user.firstname}} </template> --> <!-- 第二种 slot-scope --> <template slot-scope="slotDate"> {{slotDate.user.firstname}} </template> </slot-test> </div> <script> Vue.component('slot-test',{ data:function(){ return { user:{ firstname:'冰冰', lastname:'范' } } } } </script>
scope
被 2.5.0 新增的 slot-scope 取代。推荐 2.6.0 新增的 v-slot。
用于表示一个作为带作用域的插槽的 元素，它在 2.5.0+ 中被 slot-scope 替代。
除了 scope 只可以用于 元素，其它和 slot-scope 都相同。
v-slot
可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。
用法：提供具名插槽或需要接收 prop 的插槽 、
<template> 组件 (对于一个单独的带 prop 的默认插槽) <body> <div id="app"> <!-- 需求遍历父组件中数据通过子组件动态渲染到页面上 --> <slot-frusts :list="list"> <template v-slot="fruits"> <span :class='fruits.info.id==2?"current":""'>{{fruits.info.name}}</span> </template> </slot-frusts> </div> <script> Vue.component('slot-frusts',{ props:['list'], template:` <div> <ul> <li :key='item.id' v-for="(item,index) in list"> <slot :info='item'>{{item.id}}</slot> </li> </ul> </div>` }); let options={ el:'#app', data:{ list:[{ id:1, name:'apple' },{ id:2, name:'orange' },{ id:3, name:'banana' }] } } var vm=new Vue(options); </script> </body>
测试
子组件
<template> <div> <h4>这是子组件</h4> <slot name="myslot" :data='list'></slot> </div> </template> <script> export default { name:'Son', data(){ return{ list:[ {name:"Tom",age:15}, {name:"Jim",age:25}, {name:"Tony",age:13} ] } } } </script>
父组件
<template> <div id="app"> <Main></Main> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> </div> </template> <script> import Main from './components/Main.vue' export default { name: 'App', components: { Main } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; /* margin-top: 60px; */ } </style>
结果
结论
获得了子组件slot里面的值
