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

备注:新手学习,

直接引入的方式


<html>

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>title>
        
        <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。

你可能感兴趣的:(vue)