vue slot与传参实例代码讲解

插槽分为默认插槽和具名插槽：

默认插槽：　

//父组件

  
父组件
  
   
默认插槽
  


//子组件

 
子组件
 

具名插槽：

  注意：具名插槽需要包裹在  template  标签中，否则会报错

//父组件

  
父组件
  
   
  
 
//子组件
 

  
子组件
   //name="插槽名"
 

子组件向父组件传参：

//父组件 
 

  
父组件
  
   
   
  
 

//子组件

结果：

补充：vue 利用slot向父组件传值

闲话不多说，上代码

子组件，里面有slot插槽，并在slot上绑定了text值

父组件通过slot-scope就可以拿到子组件slot上绑定的值，并且2.5.0版本可以用于任意元素上

这样，就可以拿到子组件里面的text值。

总结

以上所述是小编给大家介绍的vue slot与传参实例代码讲解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！