vue中slot的用法案例
Posted zhujiasheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中slot的用法案例相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <cont :list="[{name:‘xhA‘}]"> <!-- slot-scope设置插槽 --> <!-- 因为list上prop获取过来的 无法直接设置到插槽中 需要借助 slot-scope读取到 然后才可以设置到插槽中 --> <!-- 也可以将prop过来的数据 设置到data中 然后通过data来读取 --> <template slot="cc01" slot-scope="list"> <button>111 </button> <!-- 设置插槽数据 --> <div>{{list}}</div> </template> <template slot="cc02" slot-scope="list"> <!-- 直接通过直接父类data中来设置 --> <button>222----{{dataList}}--333</button> </template> <template slot="cc03"> <button>333</button> </template> </cont> </div> <script> Vue.component(‘cont‘,{ template:`<div> <slot name="cc01" :list="list"></slot> <slot name="cc02" :list="list"></slot> <slot name="cc03" :list="list"></slot> </div>`, props:{ list:{ default:[], type:Array } } }) new Vue({ data:{ dataList:[{msg:‘111‘},{msg:‘222‘},{msg:‘333‘}] } }).$mount(‘#app‘) </script> </body> </html>
以上是关于vue中slot的用法案例的主要内容，如果未能解决你的问题，请参考以下文章