理解vue中的scope的使用

 理解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',    
                    
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信