vue插槽的几种方式

插槽的作用：可以实现子组件的个性化引用，复用更灵活，参数&层级 数据加工 个性化动态拼装。相当于在父子组件之间挖一个洞，在洞里进行连接和传递数据。在子组件中留一个空间，由父组件进行搭建。

插槽实现的方法：

1. slot标签，组件包裹 外部维护参数以及解构，内部设定最终出现位置

1）默认插槽

在vue实例中，默认插槽会包裹在default对象里，即所有默认插槽内容都是一个整体。

2）具名插槽

子组件和父组件有一个name属性对应的插槽，利用name索引，找到对应内容，将其包裹在name对应的实例对象里进行上下文解析。

3）作用域插槽

可将数据维护放在子组件中，子组件承担更多的功能。

问题：name索引如何做到按名称区分渲染？

如图：在vue实例中，将各个插槽均包裹起来，实现整体改变的更新渲染。

代码说明：

父组件：

  <ChildComponent>
    <template v-slot:header>
      <p>具名插槽 父组件header</p>
    </template>
    <p>默认插槽内容1</p>
    <p>默认插槽内容2</p>

    <!-- 作用域插槽 -->
    <template v-slot:content="slotProps">
      <p>{{ slotProps.text }}</p>
    </template>

    <template v-slot:footer>
      <p>具名插槽 父组件footer</p>
    </template>
  </ChildComponent>

子组件：

<template>
  <slot name="header"></slot>
  <slot></slot>
  子组件
  <slot name="content" :text="text"></slot>
  <slot name="footer"></slot>
</template>
<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      text: '子组件内容文本'
    }
  },
}
</script>

如何使用：比如多个场景有共同的部分，仅有少数内容区别，可使用插槽，对应数据若子组件可统一维护则可使用作用域插槽；若各个部分需要单独维护数据内容，可使用具名插槽。多处不一致不可使用默认插槽，可用具名插槽来区分内容。

模板的二次加工方案

1. watch | computed   数据域数据之间的加工

2. 复杂的模板相关数据处理

  1) 函数式处理数据，在html中引用一个方法，对变量处理后返回值展示；

  2) 过滤器，用管道符过滤数据，在filter中定义一个对数据的处理方式，仅对模板生效，过滤器内部无法获取vue实例，也就无法改变全局的数据；

  3) 涉及到结构的拼装怎么处理

  v-html - 逻辑运算 + 结构化的拼装

  <h2 v-html="number > 99 ? 99 : '<p>number</p>'"></h2>

  4) jsx 所有都是以js的形式进行描述

  以render的格式进行书写，返回一个结构体，写jsx，

jsx语法粗略总结：（）里的是节点 是node，{}里的js

render 优缺点： 灵活，全部以js的形式写代码

将整个流程简化 相当于diff之前的一些步骤省略，直接进行render，render挂载在vue实例上。

但是读代码不如模板清晰。需要babel编译支持，需要install babel-help-jsx啥的

jsx代码：

  render() {
    const pNode = (
      <p>{ '90' }</p>
    )
    return (
      <ul>
        {
          {/* 
            无法使用语法糖 实现 v-for v-model v-if v-slot 等的功能
           */}
          this.options.map(item => {
            return (
              <li
              item={ item }
              value={ item.value }
              onInput={ this.handleChange }
              >
                hello
                { pNode }  // 实现插槽功能
              </li>
            )
          })
        }
      </ul>
    )
  }