render()用法

最新推荐文章于 2024-08-08 11:34:48 发布

hamimelon2020

最新推荐文章于 2024-08-08 11:34:48 发布

阅读量501

点赞数

分类专栏： JavaScript vue

本文链接：https://blog.csdn.net/weixin_40945354/article/details/119794936

版权

Vue.js 自定义组件渲染 HTML标题属性

关键词由CSDN通过智能技术生成

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<div id="app">
   <anchored-heading :level="3">
     <a name="hello-world" href="#hello-world">
       Hello world!
     </a>
   </anchored-heading>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({
      app.component('anchored-heading', {
            render() {
                const { h } = Vue
                
                return h (
                  'h' + this.level,
                  {},
                  this.$slots.default()
                )
            },
            props: {
              level: {
                type: Number,
                required: true
              }
            }
        })
    })

    app.mount("#app")
</script>
</html>

修改后

<!DOCTYPE html>
<div id="app">
   <anchored-heading :level="3">
     <a name="hello-world" href="#hello-world">
       Hello world!
     </a>
   </anchored-heading>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({})
      app.component('anchored-heading', {
            render() {
                const { h } = Vue
                
                return h(
                  'h' + this.level,
                  {},
                  this.$slots.default()
                )
            },
            props: {
              level: {
                type: Number,
                required: true
              }
            }
        })
    

    app.mount('#app')
</script>
</html>

渲染字符的标题大小
把3改成1

<!DOCTYPE html>
<div id="app">
   <anchored-heading :level="1">
     <a name="hello-world" href="#hello-world">
       Hello world!
     </a>
   </anchored-heading>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = Vue.createApp({})
      app.component('anchored-heading', {
            render() {
                const { h } = Vue
                
                return h(
                  'h' + this.level,
                  {},
                  this.$slots.default()
                )
            },
            props: {
              level: {
                type: Number,
                required: true
              }
            }
        })
    

    app.mount('#app')
</script>
</html>