Home >Web Front-end >JS Tutorial >Detailed explanation of the use of Vue scope slots
This time I will bring you a detailed explanation of the use of Vue scope slots. What are the precautions when using Vue scope slots? The following is a practical case, let’s take a look.
For example, I wrote a list group software that can realize stripes. After publishing, the user can customize the content or style of each row (ordinary slot can do the job). The key to scope slots is that the parent component can receive parameters passed from the slot of the child component. See the case and comments for details.
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Vue作用域插槽</title> <scriptsrc="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> </head> <body> <pid="app2"> <my-stripe-list:items="users"odd-bgcolor="#D3DCE6"even-bgcolor="#E5E9F2"> <!-- props对象接收来自子组件slot的$index参数 --> <templateslot="cont"scope="props"> <span>{{users[props.$index].id}}</span> <span>{{users[props.$index].name}}</span> <span>{{users[props.$index].age}}</span> <!-- 这里可以自定[编辑][删除]按钮的链接和样式 --> <a:href="'#edit/id/'+users[props.$index].id"rel="external nofollow">编辑</a> <a:href="'#del/id/'+users[props.$index].id"rel="external nofollow">删除</a> </template> </my-stripe-list> </p> <script> Vue.component('my-stripe-list', { /*slot的$index可以传递到父组件中*/ template: ` <p> <pv-for="(item, index) in items"style="line-height:2.2;":style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor"> <slotname="cont":$index="index"></slot> </p> </p> `, props: { items: Array, oddBgcolor: String, evenBgcolor: String } }); new Vue({ el: '#app2', data: { users: [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 22}, {id: 3, name: '王五', age: 27}, {id: 4, name: '张龙', age: 27}, {id: 5, name: '赵虎', age: 27} ] } }); </script> </body> </html>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
JS implements evaluation star rating
##js implements picture fade-in and fade-out at a uniform speed
JS implements data validation and check box form submission
The above is the detailed content of Detailed explanation of the use of Vue scope slots. For more information, please follow other related articles on the PHP Chinese website!