vue单页应用使用render

最新推荐文章于 2024-05-28 01:18:35 发布

weixin_33682719

最新推荐文章于 2024-05-28 01:18:35 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/PiaoYu/p/10766092.html

本文分享了使用VUE的render函数替代template标签的方法，通过实例演示如何在组件中应用render函数，加速新手上手过程。

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

之前都是做后台工作，由于工作需要才学VUE，想快点入手，但是官方文档，真的是不太尽人意，需要自己查阅大量的资料。

废话少说，直接上代码吧，给一些想快速上手的小伙伴们一点帮助，少走点弯路，少花点时间。

想要像写render函数，其实就是把<template></template>去掉，比如现在有A.vue是用render来写的，那么代码如下：

<script>
export default {
  name: "mycomponent",
  render: function(createElement) {
    return createElement(
      "h" + this.level, // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    );
  },
  props: {
    level: {
      type: String
    }
  }
};
</script>

　　然后想在B.vue调用A.vue，直接像调用正常组件一样就可以了，代码如下

<template>
  <div class="hello">
     <zj level="2">
       <slot>我是render组件</slot>
     </zj>
  </div>
</template>

<script>
import zj from '@/components/A'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    zj
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

　　其实就是这么简单，没做过的小伙伴们也许很疑惑，但是说清楚了，其实就是那么一回事。希望对刚刚学习VUE的小伙伴们有所帮助

转载于:https://www.cnblogs.com/PiaoYu/p/10766092.html