vue中的scope使用详解(vue scoped属性作用?实现原理)

推荐整理分享vue中的scope使用详解(vue scoped属性作用?实现原理)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue中scoped作用原理,vue中的scoped,vue中scoped有什么用,vue scope-slot,vue scope-slot,vue scope-slot,vue中的scoped,vue scope,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

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

如下模板页面：

js 代码如下：

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

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

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

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

因为遍历了二次，因此还有一个是如下对象；

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

最后页面被渲染成如下页面；

查看页面效果；

总结

以上所述是小编给大家介绍的vue中的scope使用详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言！

轻松理解vue的双向数据绑定问题 Vue介绍Vue是当前很火的一款MVVM的轻量级框架，它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api，使得我们很容易上手。Vue与MVVM

Vue中正确使用jQuery的方法 题主Vue小白，入门demo时想在其中使用jQuery（当然可能是不推荐的做法哈，毕竟俩儿的风格不一样，但万一你就需要呢_^^_），结果遇到问题，最终倒腾解

Angularjs按需查询实例代码 课程信息管理界面有这样一个需求，当课程类型为公选课的时候，可以选择课程性质，当为其他课程类型的时候，不必选择课程性质。代码：/***获取课