Vue两种环境下的渲染函数render（新手学习）

最新推荐文章于 2024-09-11 09:00:00 发布

mf_717714

最新推荐文章于 2024-09-11 09:00:00 发布

阅读量2.2k

点赞数 1

分类专栏： vue 文章标签： vue render components component

本文链接：https://blog.csdn.net/mf_717714/article/details/81632422

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

备注：新手学习，

直接引入的方式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <!--<script src="https://unpkg.com/vue"></script>-->
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <div id="container">
            <anchored-heading :level="1">Hello world!</anchored-heading>
        </div>

        <script type="text/javascript">

            Vue.component('anchored-heading', {
                render: function(createElement) {
                    return createElement(
                        'h' + this.level, // tag name 标签名称
                        this.$slots.default // 子组件中的阵列
                    )
                },
                props: {
                    level: {
                        type: Number,
                        required: true
                    }
                }
            })

            //声明Vue不能放在最上面，只能放在下面
            new Vue({
                el: '#container'
            });
        </script>

    </body>

</html>

node环境下的方式

<template>
  <div>

    <anchored-heading :level="5">Hello world!</anchored-heading>

  </div>
</template>
<script>
    export default {
        name: "render",
        components: {
          anchoredHeading: {
                render: function (createElement) {
                  return createElement(
                    'h' + this.level,   // tag name 标签名称
                    this.$slots.default // 子组件中的阵列
                  )
                },
                props: {
                  level: {
                    type: Number,
                    required: true
                  }
                }
          }
        }
    }
</script>