Vue.js特性ScopedSlots的示例分析

这篇文章主要介绍Vue.js特性Scoped Slots的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联是一家集网站建设,萨尔图企业网站建设,萨尔图品牌网站建设,网站定制,萨尔图网站建设报价,网络营销,网络优化,萨尔图网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

什么是scoped slots

A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.

上面是官方的定义。

作用域插槽(Scoped Slots)是vue.js中一个非常有用的特性,它可以使组件更加通用和复用。唯一的问题是理解起来比较困难。试图去让你理解父与子作用域的交织关系,像解决一道数学难题。

简单点说slot就是插槽,它是可以被替换掉的,替换它的内容是可以拿到当前组件的上下文的

举个简单的例子

//button.vue


//app.vue


slot其实就是一个占位,button.vue的slot位置会被app.vue里面的替换了。

复杂例子1:slot内的东西可以获取父组件的上下文信息

//list.vue
//app.vue

解释见上面代码注释。注意一点的是slot-scope=”row” 这里的名字(row)是可以任意取的。

named slots

可以直接放到普通标签上面,可以放template标签上

slot里面的作用域是普通标签或者template是一致的。不能访问父组件的作用域。

复杂例子2:slot里面是可以放东西的,是默认的模板,可被替换。

//table.vue
//app.vue


 //这里替换table.vue里面slot为row的内部内容
 
  {{row.title}}
 
 
  
 
 
  
  
  
  
  
  
 
  
 
 

Vue.js特性Scoped Slots的示例分析

以上是“Vue.js特性Scoped Slots的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


分享文章:Vue.js特性ScopedSlots的示例分析
文章网址:http://scyanting.com/article/pocjog.html

其他资讯