介绍 & lt; ! DOCTYPE html>
& lt; html>
,& lt; head>
,& lt; title> Vue-scope的理解& lt;/title>
,& lt; script src=啊?libs/vue.js"祝辞& lt;/script>
,& lt; link rel=皊tylesheet", href=啊?css/index.css", rel=癳xternal nofollow",/比;
,& lt; script src=啊?js/scope.js"祝辞& lt;/script>
,& lt;/head>
,& lt; body>
,& lt; div id=癮pp"比;
& lt;才能tb-list :数据=癲ata"比;
& lt;才能template 范围=皊cope"比;
,,& lt; div 类=癷nfo",: s=癑SON.stringify(范围),在
,,& lt; p>姓名:{{scope.row.name}} & lt;/p>
,,& lt; p>年龄:,{{scope.row.age}} & lt;/p>
,,& lt; p>性别:,{{scope.row.sex}} & lt;/p>
,,& lt; p>索引:{{范围。美元指数}}& lt;/p>
,,& lt;/div>
& lt;才能/template>
& lt;才能/tb-list>
,& lt;/div>
,& lt; script id=皌b-list",类型=拔谋?x-template"比;
& lt;才能ul>
& lt;才能li v=?项目,,指数),拷贝data"比;
,,& lt; slot :行=癷tem",:美元指数=癷ndex"祝辞& lt;/slot>
& lt;才能/li>
& lt;才能/ul>
,& lt;/script>
,& lt; script 类型=拔谋?javascript"比;
Vue ({new 才能;
el才能:& # 39;#应用# 39;
数据才能(),{
,,return {
,,,数据:[
,,,{
,,,的名字:,& # 39;kongzhi1& # 39;
,,,年龄:,& # 39;29日& # 39;
性:,,,,& # 39;男人# 39;
,,,},,
,,,{
,,,的名字:,& # 39;kongzhi2& # 39;
,,,年龄:,& # 39;30 & # 39;
性:,,,,& # 39;女人# 39;
,,,}
,,,)
,,}
,,},
方法:才能,{
,,
,,}
,,});
,& lt;/script>
,& lt;/body>
& lt;/html> Vue.component (& # 39; tb-list& # 39;,, {
,模板:& # 39;# tb-list& # 39;
,道具:{
,数据:{
类型:才能,数组,
要求:才能成立
,}
},
,数据(){
,return {
,}
},
,beforeMount (), {
},
,安装(){
},
,方法:{
,}
}); 数据:,(
,{
,名字:& # 39;kongzhi1& # 39;
,年龄:& # 39;29日& # 39;
,性:& # 39;男人# 39;
},大敌;
,{
,名字:& # 39;kongzhi2& # 39;
,年龄:& # 39;30 & # 39;
,性:& # 39;女人# 39;
,}
) & lt; ul>
,& lt; li v=?项目,,指数),拷贝data"比;
,& lt; slot :行=癷tem",:美元指数=癷ndex"祝辞& lt;/slot>
,& lt;/li>
& lt;/ul> & lt; template 范围=皊cope"比;
,& lt; div 类=癷nfo",: s=癑SON.stringify(范围),在
,& lt; p>姓名:{{scope.row.name}} & lt;/p>
,& lt; p>年龄:,{{scope.row.age}} & lt;/p>
,& lt; p>性别:,{{scope.row.sex}} & lt;/p>
,& lt; p>索引:{{范围。美元指数}}& lt;/p>
,& lt;/div>
& lt;/template> {“row": {“name":“kongzhi1",“age":“29”、“sex":“man"},“index"美元;:0} {“row": {“name":“kongzhi2",“age":“30”,“sex":“woman"},“index"美元;:1}
本篇文章为大家展示了范围方法如何在vue中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
我们都知道vue插槽插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用<代码>模板范围=皃rops">
注意:范围=?它可以取任意字符串“;
上面已经说了范围获取到的是一个对象,是什么意思呢?我们先来看一个简单的演示就可以明白了~
如下模板页面:
js代码如下:
上面代码我们注册了一个叫tb-list这么一个组件,然后给tb-list传递了一个数据属性值,该值是一个数组,如下值:
tb-list组件模板页面是如下:
遍历数据属性值,然后使用槽来接收tb-list组件中的任何内容;其内容如下:
最后在模板上使用范围来接收槽中的属性,因此范围的值是如下一个对象:
因为遍历了二次,因此还有一个是如下对象,
从上面返回的范围属性值我们可以看的到,范围返回的值是槽标签上返回的所有属性值,并且是一个对象的形式保存起来,该插槽有两个属性,一个是行,另一个是美元指数,因此返回{“row":项目,“index"美元;:“指数索引“};就其中项是数据里面的一个个对象。
上述内容就是范围方法如何在vue中使用,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
