createElement 测试

最新推荐文章于 2024-06-12 10:20:08 发布

weixin_33714884

最新推荐文章于 2024-06-12 10:20:08 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mdu/blog/891134

本文详细介绍了如何使用Vue.js创建自定义组件，包括createElement方法的使用技巧，通过具体实例展示了如何构建复杂的嵌套标签结构。此外，还讲解了如何利用props传递属性值，以及如何通过插槽(slot)来实现内容的灵活插入。

为什么80%的码农都做不了架构师？>>>

createElement ()

第一个参数标签名，
第二个参数如果嵌套标签就写[]，里面继续写createElement,每一个变量就是一个标签
如果不嵌套，第二个参数就写{}，里面可以写属性，第三个参数写标签的内容，可以是变量名

<anchored-heading :level="2">Hello world! <p>pp</p></anchored-heading>

...

    Vue.component('anchored-heading', {
        render: function (createElement) {
            //createElement 第一个参数标签名，
            // 第二个参数如果嵌套标签就写[]，里面继续写createElement,每一个变量就是一个标签
            // 如果不嵌套，第二个参数就写{}，里面可以写属性，第三个参数写标签的内容，可以是变量名
            return createElement('div',
                [
                    createElement('i',  // 第一个i标签
                        [
                            createElement('a', { // 内部的子元素为一个a标签
                                attrs: {
                                    name: headingId,
                                    href: '#' + headingId,
                                    class: 'class'
                                }
                            }, '这是一个a标签')   // 也可以自己写
                        ]
                    ),
                    createElement('span', // 第二个span 标签
                        [
                            createElement('a', {  // 内部的子元素为一个a标签
                                attrs: {
                                    name: headingId, // 可以使用变量名
                                    href: '#' + headingId,
                                    class: 'class'  // 定义样式名
                                }
                            }, this.$slots.default) // 内容，可以使用插槽slot
                        ]
                    )
                ]
            )
        },
        props: {
            level: {    // 获取上组件的参数，并定规则
                type: Number,
                required: true
            }
        }
    })

<script type="text/x-template" id="anchored-heading-template">
  <div>
    <h1 v-if="level === 1">
      <!--<slot name='item'>item</slot>-->
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</script>

转载于:https://my.oschina.net/mdu/blog/891134