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

最新推荐文章于 2024-03-31 18:00:22 发布

mf_717714

最新推荐文章于 2024-03-31 18:00:22 发布

阅读量2.1k

点赞数 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>

区别：直接引入使用的注册是component，node环境下的是components。

mf_717714

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue两种环境下的渲染函数render（新手学习）

备注：新手学习，直接引入的方式&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta http-equiv=&quot;X-UA-Compatible&amp
复制链接

扫一扫