Vue render与$slot $slotScoped应用

默认插槽

<script>
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Page extends Vue {
  render() {
    return (
      <div>
        <p>Uxx智能家居</p>
        <customNode>
          <p>欢迎回家！</p>
        </customNode>
      </div>
    );
  }
}
@Component()
class customNode extends Vue {
  render() {
    return (
      <div>
        <p>尊敬的用户</p>
        <p>{this.$slots.default}</p>
      </div>
    );
  }
}
</script>

请注意，在render里使用插槽的时候，不能用template做包裹（因为template在JSX里面解析会被赋予display:none的属性）

 

具名插槽

<script>
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Page extends Vue {
  render() {
    return (
      <div>
        <p>Uxx智能家居</p>
        <customNode>
          <p slot="name">欢迎回家！</p>
        </customNode>
      </div>
    );
  }
}
@Component()
class customNode extends Vue {
  render() {
    return (
      <div>
        <p>尊敬的用户</p>
        <p>{this.$slots.name}</p>
      </div>
    );
  }
}
</script>

作用域插槽

<script>
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Page extends Vue {
  render() {
    return (
      <div>
        <p>Uxx智能家居</p>
        <customNode
          {...{ scopedSlots: { name: postData => <p>{postData.name}</p> } }}
        ></customNode>
      </div>
    );
  }
}
@Component()
class customNode extends Vue {
  postData = {
    name: '大傻蛋',
  };
  render() {
    return (
      <div>
        <p>尊敬的用户</p>
        <p>{this.$scopedSlots.name(this.postData)}</p>
      </div>
    );
  }
}
</script>

注意，这里用$scopedSlots来代替作用域插槽（$slot表示普通插槽），取消了v-bnd对作用域的绑定，改用传参来传递

scopedSlots属性绑定插槽内容，替代了往customNode里面写插槽内容的写法

 

JSX函数式写法

render函数：

该函数接受三个参数：

render(h) {
'div', // 参数一
{ attrs: { ...this.$attrs, title: this.title } }, // 参数二
[h('h1', '这是标题'), h('p', this.$scopedSlots.content)] // 参数三
}

参数一类型：

① String类型：HTML标签 

render(h) {
    return h('div',....)
}

② Object类型: 一个含有数据选项的对象，可以理解为组件

import customMessage from './customMessage .vue';
...
render(h) {
   return h(customMessage,{..},[...])
}

③ Function类型： 返回一个含有数据选项的对象 简单理解为再套娃一个render函数(?存疑)

render(h) {
   return h(h('div',{...}),{..},[...])
}

参数二类型：

Object类型，接收虚拟DOM上的特有属性。如class、style、attrs、domProps等。

render(h, context) {
    const {listeners,staticClass, className} = context;
     return h(Component, {
      props: {
        field,
        updateFields,
      },
      attrs: {
        placeholder: field.widget.placeholder,
        view: view || field.widget.view,
      },
      on: {
        input: () => {},
        ...listeners,
      },
      style:{color:'red'},
      class: className,
      staticClass,
    });
}

参数三类型：

String|Array：代表子节点

render(h) {
    return this.$createElement(
      this.component,
      { attrs: { ...this.$attrs, title: this.title } },
      [h('h1', '这是标题'), h('p', this.$scopedSlots.content)],
    );
  }

render(h) {
    return this.$createElement(
      this.component,
      { attrs: { ...this.$attrs, title: this.title } },
      this.$scopedSlots.content
    );
  }

用render函数复写上面的例子

默认插槽：

<script>
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Page extends Vue {
  render(h) {
    return h('div', [
      h('p', 'Uxx智能家居'),
      h(customNode, [h('p', '欢迎回家！')]),
    ]);
  }
}
@Component()
class customNode extends Vue {
  render(h) {
    return h('div', {}, [
      h('p', '尊敬的用户'),
      h('p', {}, this.$slots.default),
    ]);
  }
}
</script>

具名插槽：

<script>
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Page extends Vue {
  render(h) {
    return h('div', [
      h('p', 'Uxx智能家居'),
      h(customNode, [h('p', { slot: 'name' }, '欢迎回家！')]),
    ]);
  }
}
@Component()
class customNode extends Vue {
  render(h) {
    return h('div', {}, [h('p', '尊敬的用户'), h('p', {}, this.$slots.name)]);
  }
}
</script>

 作用域插槽：

<script>
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Page extends Vue {
  render(h) {
    return h('div', [
      h('p', 'Uxx智能家居'),
      h(customNode, {
        scopedSlots: {
          name: postData => <p>{postData.name}</p>,
        },
      }),
    ]);
  }
}
@Component()
class customNode extends Vue {
  postData = {
    name: '大傻蛋',
  };
  render(h) {
    return h('div', {}, [
      h('p', '尊敬的用户'),
      h('p', {}, this.$scopedSlots.name(this.postData)),
    ]);
  }
}
</script>