Vue2项目中使用render

最新推荐文章于 2024-10-24 21:41:03 发布

子夕若晨

最新推荐文章于 2024-10-24 21:41:03 发布

阅读量980

点赞数 1

分类专栏： work 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/caizhuangzhuang/article/details/129120544

版权

work 专栏收录该内容

3 篇文章

订阅专栏

该文章展示了在Vue.js中如何使用render函数创建自定义组件，以及如何传递props和使用插槽。在about.vue文件中，引入了Sonslot.vue组件，通过render函数动态生成h1或h2标签，并接收title和level属性。Sonslot.vue组件则利用props接收数据并使用render函数进行渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

\src\views\about.vue

<template>
  <div>
    <h2>render函数</h2>
    <heading :title="title" :level="level">
      {{ title }}
    </heading>
  </div>
</template>

<script>
import Heading from "./son/Sonslot.vue";
export default {
  components: { Heading },
  data() {
    return {
      title: "这是由render函数渲染的标签。",
      level: "2",
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

\src\views\son\sonslot.vue

<script>
export default {
  props: ["level", "title"],
  // heading组件
  // <heading :level="1" :title="title" icon="cart">{{title}}</heading>
  // <h2 title=""></h2>
  render(h) {
    console.log("this.$slots.default :>> ", this.$slots.default);
    return h(
      "h" + this.level, // 参数1，tagname  //标签h1   
      { attrs: { title: this.title } }, // 参数2：{。。。}
      //this.$slots.default 为默认插槽
      //也可以定义具名插槽 this.$slots.名称 | 使用 v-slot:名称 插入
      this.$slots.default // 参数3，子节点VNode数组
        // 'h1',{style:{'background-color':'black',width:"100px",height:'100px'}}
    );
  },
};
</script>

<style lang="scss" scoped>
</style>

示例：

效果：