当前位置: 首页 > Web前端 > vue.js

Vue组件高级槽的使用slot

时间:2023-03-31 17:55:41 vue.js

slot组件槽的基本用途是让封装好的组件更具可扩展性,让用户可以决定组件内部的一些内容显示什么以及如何封装这些组件。如果每个插槽单独封装一个组件,显然是不合适的;比如每个页面都返回,这部分就需要重复封装。但是,如果封装成一个,就不合理了。有的leftside是menu,有的是return等。怎么样包适合抽共性,留差异。最好的封装方式是将共性提取到组件中,将差异暴露为插槽。一旦我们预留了插槽,用户就可以根据自己的需要决定在插槽中插入什么。contentslots的基本使用slot的默认值如果有多个值,同时放入组件中替换,并将它们一起用作替换元素Hahahahai>嘿嘿嘿

我是组件

hhhhh

命名插槽的使用使插槽id更易于用于区分插槽标题返回
leftmiddlerightspan>
Scopeslotcompilationscope让我们通过一个例子来理解这个概念。首先考虑下面的代码是否可以渲染  * ,我们使用isShow属性  * isShow属性包含在组件中,也包含在Vue实例中* 可以渲染出来  * 官方给了一个指引:父组件template模板中的所有内容都将在父作用域中编译,子组件模板中的所有内容都将在子作用域中编译。  * 当我们使用时,整个组件的使用过程相当于  * 出现在父组件中,所以其function域是父组件,使用的属性也是父组件的属性  * 所以isShow使用的是Vue实例中的属性,而不是子组件的属性

我是子组件

我是子组件哈哈哈

scope-slot* scopeslot是slot中比较难理解的地方* 在这里,我们用一句话来总结  * 父组件替换slot的标签,但是内容由子组件提供{{item}}-{{slot.data.join('*')}}
    {{item}}