首页 / VUE / 在scope怎么使用vue

在scope怎么使用vue

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在scope怎么使用vue，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1734字，纯文字阅读大概需要3分钟。

内容图文

这次给大家带来的是，在scope怎么使用vue，我们都知道vue slot插槽可以传递任何属性或html元素，但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值，获取到的值是一个对象，这篇文章就给大家好好分析一下。

上面已经说了 scope获取到的是一个对象，是什么意思呢？我们先来看一个简单的demo就可以明白了~

<!DOCTYPE html>
<html>
 <head>
 <title>Vue-scope的理解</title>
 <script src="./libs/vue.js"></script>
 <link rel="stylesheet" href="./css/index.css" rel="external nofollow" />
 <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',
    sex: 'man'
    }, 
    {
    name: 'kongzhi2',
    age: '30',
    sex: 'woman'
    }
   ]
   }
  },
  methods: {
     
  }
  });
 </script>
 </body>
</html>

js 代码如下：


Vue.component('tb-list', {
 template: '#tb-list',
 props: {
 data: {
  type: Array,
  required: true
 }
 },
 data() {
 return {
 }
 },
 beforeMount() {
 },
 mounted() {
 },
 methods: {
 }
});

从上面返回的scope属性值我们可以看到，scope返回的值是slot标签上返回的所有属性值，并且是一个对象的形式保存起来，该slot有两个属性，一个是row，另一个是$index, 因此返回 {"row": item, "$index": "index索引"}; 其中item就是data里面的一个个对象。


相信看了以上介绍你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

ajax怎样才能读取本地的json

js实现仿window系统日历效果

nvm管理不同版本的node的方法

以上就是在scope怎么使用vue的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的在scope怎么使用vue全部内容，希望文章能够帮你解决在scope怎么使用vue所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/296734.html

来源：【匿名】