vue的slot(slot具名插槽。slot非具名插槽,slot的作用域,)

vue的slot

1、什么是slot

slot是插槽,插即是可以插入,槽就是坑,即是可以再代码中插入
如果子组件模板中不包含插口,那么父组件的内容将会被丢弃。当子组件模板中有一个么有属性的插槽时,父组件传入的整个内容片段,将插入到插槽所在的dom的位置,并替换掉插槽标签本身。
举例:


	
		
		Vue 父子组件通信之子组件索引
	
	
		

正文内容

更多的正文内容

vue的slot(slot具名插槽。slot非具名插槽,slot的作用域,)_第1张图片
vue的slot(slot具名插槽。slot非具名插槽,slot的作用域,)_第2张图片

当子组件有slot的时候,举例


	
		
		Vue 父子组件通信之子组件索引
	
	
		

标题

正文内容

更多的正文内容

底部信息

vue的slot(slot具名插槽。slot非具名插槽,slot的作用域,)_第3张图片
vue的slot(slot具名插槽。slot非具名插槽,slot的作用域,)_第4张图片

slot作用域

作用域是指:子组件中的数据,在父组件中可以被引用。


	
		
		Vue 父子组件通信之子组件索引
	
	
		

标题

正文内容

更多的正文内容

{{testMore.testText}}
底部信息

vue的slot(slot具名插槽。slot非具名插槽,slot的作用域,)_第5张图片
vue的slot(slot具名插槽。slot非具名插槽,slot的作用域,)_第6张图片
参考网址:https://www.jianshu.com/p/0d8952ff4227

你可能感兴趣的:(vue)