vue 作用域插槽

看文档的时候总会懵逼 找了其他大佬的博客看了一下 发现还是"俗" 一点的解释比较适合我

作用域插槽是啥?

  • 官方一点的:父组件应用子组件可以给插槽填充内容,但一般只填充html标签,里边的数据信息要由插槽自己提供,这个过程称为作用域插槽
  • 自己总结的俗话:父组件在用子组件来填充插槽的时候 有时候需要用到子组件里面插槽的数据 .
    子组件文件插槽上带的数据 在父组件的子组件标签里 让一个标签 带有slot-scope="xxx" 去接收 以便在下面进行调用

目前我的理解就是 在父子组件之间体现的比较多 所以就用父子组件举例
比如说 我在子组件文件里面来个插槽

//这是子组件文件

-----分割线 下面是父组件--------


//这里是父组件
// 是注册后的子组件标签

//这里的recData 就是接收到上面子组件文件里面name叫jinmao的插槽里面传递的数据 //就可以进行如下使用 我的土金毛叫{{recData.uname}},她今年{{recData.age}}岁了,她的性别是{{recData.gender}},爱好是{{recData.hobby}}

你可能感兴趣的:(vue 作用域插槽)