<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>作用域插值</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app"> <child> <!--必须使用template标签关键字 slot-scope 属性 定义的props的名字可以随便取用来接收组件的数据--> <template slot-scope="props"> <li>{{props.item}}</li> </template> </child> </div> <script> //1、定义组件 Vue.component('child', { data() { return { list:[1,2,3,4,5] } }, //模板里用slot通过v-for遍历好数据 template: `<div> <ul> <slot v-for="item of list" :item=item></slot> </ul> </div>`, methods: {}, mounted() { } }) let app = new Vue({ el: "#app", data: {}, computed: {}, methods: {}, watch: {} }) </script> </body> </html>
vue 作用域插槽笔记
猜你喜欢
转载自blog.csdn.net/qq_36416878/article/details/80208907
今日推荐
周排行