scope方法如何在vue中使用

本篇文章为大家展示了scope方法如何在vue中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联从2013年开始，先为福山等服务建站，福山等地企业，进行企业商务咨询服务。为福山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

我们都知道vue slot插槽可以传递任何属性或html元素，但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值，获取到的值是一个对象。

注意：scope="它可以取任意字符串";

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

如下模板页面：



 
 Vue-scope的理解
 
 
 
 
 
 
  
  
   
   姓名:{{scope.row.name}}
   年龄: {{scope.row.age}}
   性别: {{scope.row.sex}}
   索引：{{scope.$index}}

new Vue({ el: '#app', data() { return { data: [ { name: 'kongzhi1', age: '29', sex: 'man' }, { name: 'kongzhi2', age: '30', sex: 'woman' } ] } }, methods: { } });

js 代码如下：

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

上面代码我们注册了一个叫 tb-list 这么一个组件，然后给 tb-list 传递了一个data属性值；该值是一个数组，如下值：

data: [
 {
 name: 'kongzhi1',
 age: '29',
 sex: 'man'
 }, 
 {
 name: 'kongzhi2',
 age: '30',
 sex: 'woman'
 }
]

tb-list组件模板页面是如下：

遍历data属性值，然后使用slot来接收 tb-list组件中的任何内容；其内容如下：


 
 姓名:{{scope.row.name}}
 年龄: {{scope.row.age}}
 性别: {{scope.row.sex}}
 索引：{{scope.$index}}

最后在模板上使用scope来接收slot中的属性；因此scope的值是如下一个对象：

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

上述内容就是scope方法如何在vue中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

scope方法如何在vue中使用

其他资讯