jsx

vue使用render+jsx代替template！

使用jsx替换template

请将下面的template转换成render+jsx的形式：

// layoutCpt
<template>
  <div class="wrap">
    <slot></slot>
  </div>
</template>

请将下面的template转换成render+jsx的形式：

// layoutCpt
<template>
  <div class="wrap">
    <slot name="content"></slot>
  </div>
</template>

请将下面的template转换成render+jsx的形式：

// layoutCpt
<template>
  <div class="wrap">
    <slot>默认slot</slot>
  </div>
</template>

请将下面的template转换成render+jsx的形式：

// layoutCpt
<template>
  <div class="wrap">
    <slot name="content">默认content</slot>
  </div>
</template>

请将下面的template转换成render+jsx的形式：

// layoutCpt
<template>
  <div class="wrap">
    <slot name="content" v-bind="info">默认content</slot>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      info: {
        name: "hss",
        age: 22,
        sex: "man",
        hobby: ["code", "game"],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

使用jsx替换slot

请将下面的template转换成render+jsx的形式：

<template>
  <div>
    <layout-cpt>
      我是layoutCpt组件
    </layout-cpt>
  </div>
</template>

<script>
import layoutCpt from "./components/layoutCpt.vue";
export default {
  components: {
    layoutCpt,
  },
  data() {
    return {};
  }
};
</script>

请将下面的template转换成render+jsx的形式：

<template>
  <div>
    <layout-cpt>
      <div slot="content">hello world!</div>
    </layout-cpt>
  </div>
</template>

<script>
import layoutCpt from "./components/layoutCpt.vue";
export default {
  components: {
    layoutCpt,
  },
  data() {
    return {};
  }
};
</script>

请将下面的template转换成render+jsx的形式：

<template>
  <div>
    <layout-cpt>
      <div slot="content" slot-scope="hhh">hello world!{{hhh}}</div>
    </layout-cpt>
  </div>
</template>

<script>
import layoutCpt from "./components/layoutCpt.vue";
export default {
  components: {
    layoutCpt,
  },
  data() {
    return {};
  }
};
</script>

综合性案例

待更新！

插槽

具名插槽

this.$slots

类型：{ [name: string]: ?Array<VNode> }
只读
响应性：否

可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组：

所以，this.$slots拿到的是VNode数组

<div>
    {this.$slots.default}
    {/* this.$slots.abc是一个VNode数组，如果父组件没用使用这个abc插槽，就会使用默认的abc插槽内容 */}
    {this.$slots.abc || <div>abc具名插槽默认值</div>}
    {this.$slots.nba || <div>nba具名插槽默认值</div>}
    {this.$slots.cba || <div>cba具名插槽默认值</div>}
</div>

作用域插槽

this.$scopedSlots

类型：{ [name: string]: props => Array<VNode> | undefined }
只读
详细：

用来访问作用域插槽。对于包括 默认 slot 在内的每一个插槽，该对象都包含一个返回相应 VNode数组或者undefined的函数。

从this.$scopedSlots的类型看，它是一个对象，这个对象的键名是字符串，值是一个函数，而且这个函数返回VNode数组或者undefined

即this.$scopedSlots.xxx，xxx是一个函数，调用这个函数，会返回VNode数组或者undefined。

如果父组件调用该组件的时候，使用了xxx插槽，那么该组件里面调用this.$scopedSlots.xxx就会得到一个VNode函数；
如果父组件调用该组件的时候，没有使用了xxx插槽，那么该组件里面调用this.$scopedSlots.xxx就会得到undefined。

<div>
    {this.$scopedSlots}
    {this.$scopedSlots}
    {this.$scopedSlots}
</div>

补充

slot自从2.6.0后就废弃了！

// 下面的slot是具名插槽,因为他在layout-cpt组件内部
<template>
	<div>
    <layout-cpt>
      <div class="hss-aside" slot="customAside">aside</div>
    </layout-cpt>
  </div>
</template>

// 下面的写法，slot就是一个自定义属性而已，因为它外层没有组件
<template>
	<div>
    <div class="hss-aside" slot="customAside">aside</div>
  </div>
</template>

// 'v-slot' directive must be owned by a custom element
// v-slot指令必须在自定义元素上使用，即只能在组件上使用v-slot
<div class="hss-aside" v-slot="customAside">aside</div>

// slot-scoped需要用在组件内部，在非组件内部使用slot上使用不生效，而且会导致这个customAside插槽不渲染
<div style="display: flex">
  <div class="hss-article">article</div> 
  <slot class="hss-aside" name="customAside" slot-scope="info">aside{{info}}</slot>
</div>

vue之jsx

jsx

使用jsx替换template

使用jsx替换slot

综合性案例

插槽

具名插槽

作用域插槽

补充

slot自从2.6.0后就废弃了！

slot-scoped

指令

事件

事件修饰符

持续更新！

参考