slot插槽 · 常用笔记

# slot插槽 > 默认插槽的基本使用 ``` <pre class="calibre13">``` 自组件中使用插槽占位 <solt></solt> 父组件在自组件cpn <cpn>替换插槽部分<cpn> ``` ``` > 默认插槽的默认值 ``` <pre class="calibre13">``` <solt><button>默认按钮</button></solt> 当不传值的时候默认按钮就会显示 ``` ``` > 具名插槽的使用给插槽起名字设置name的值 ``` <pre class="calibre13">``` 比如：子组件cpn插槽 <slot name = "left"></slot> <slot></slot> 我们只想替换左边的插槽父组件中可以使用 <cpn><span slot = "left">标题</span></cpn> 那么只会替换左边的插槽替换成标题其他的插槽不会被替换 ``` ``` > # 作用域插槽 ***父组件替换插槽的标签但是内容由子组件来提供*** > 父组件替换插槽的标签但是内容由子组件来提供 > 应用场景：子组件包括一组数据需要在多个界面进行展示： > 某些界面是以水平方向-展示的 > 某些界面是以列表形式展示的 > 某些界面直接展示一个数组 > **先要理编译作用域** > 编译作用域： > 在id为app的父组件中定义isshow = true 在cpn子组件中定义变量isshow = false > 在模版app中使用组件的时候 > 变量使用的是父组件的isshow = true。所使用的变量都是用的对应id模板实例中的变量 > 详细实例看码云例子