vue slot 插槽的使用

用户2246220511315
245 阅读1分钟

插槽的作用

例子:在多个页面都要用到导航栏这个内容，但是每个页面的nav的内容又不一样，此时封装一个组件，把不同的部分都用插槽来表示，占个位置，在不同的页面引用这个组件，然后写各自的内容，然后插槽就显示不同的内容，达到了组建的可扩展性。 1.这些页面的导航结构一样，所以封装一个组件进行复用，然后将不同的部分用slot来表示 2.这些页面的结构一样，但是里面的内容不一样 结构一样封装一个组件进行复用，内容不一样用slot表示

  1. 在子组件里面定义插槽，父组件引用该子组件，然后将父组件定义好内容去替换子组件中的插槽 image.png

如何封装组件

image.png image.png

插槽的默认值

image.png

image.png

image.png

插槽的基本使用

image.png

image.png

具名插槽的使用

image.png

image.png

编译作用域

就是你在模板里面使用的数据，它属于哪一个模板就，它使用的数据就在哪一个模板里面找， image.png

image.png

image.png

作用域插槽

image.png

image.png

image.png

image.png

image.png

avatar
文章
阅读
粉丝