理解vue中的scope的使用
我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象。
注意:scope="它可以取任意字符串";
上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~
如下模板页面:
<!DOCTYPE html><html> <head> <title>Vue-scope的理解</title> <script src="./libs/vue.js"></script> <link rel="stylesheet" href="./css/index.css" /> <script src="./js/scope.js"></script> </head> <body> <div id="app"> <tb-list :data="data"> <template scope="scope"> <div class="info" :s="JSON.stringify(scope)"> <p>姓名:{{scope.row.name}}</p> <p>年龄: {{scope.row.age}}</p> <p>性别: {{scope.row.sex}}</p> <p>索引:{{scope.$index}}</p> </div> </template> </tb-list> </div> <script id="tb-list" type="text/x-template"> <ul> <li v-for="(item, index) in data"> <slot :row="item" :$index="index"></slot> </li> </ul> </script> <script type="text/javascript"> new Vue({ el: '#app', data() { return { data: [ { name: 'kongzhi1', age: '29',