Vue学习笔记十一

最新推荐文章于 2023-03-07 08:00:30 发布

输出是最好的学习

最新推荐文章于 2023-03-07 08:00:30 发布

阅读量256

点赞数

分类专栏：前端文章标签： render Vue

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/m0_37568521/article/details/77854420

版权

前端专栏收录该内容

72 篇文章 1 订阅

订阅专栏

Render函数

正常注册组件，注意这里的顺序，需要先全局注册，再实例化。

<div id="app">
    <anchored-heading :level="1">Hello world!</anchored-heading>
</div>
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
    <slot></slot>
</h1>
<h2 v-else-if="level === 2">
    <slot></slot>
</h2>
<h3 v-else-if="level === 3">
    <slot></slot>
</h3>
<h4 v-else-if="level === 4">
    <slot></slot>
</h4>
<h5 v-else-if="level === 5">
    <slot></slot>
</h5>
<h6 v-else-if="level === 6">
    <slot></slot>
</h6>
</script>
<script type="text/javascript">
Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
var app = new Vue({
    el: "#app",
    data: {
        show:true
    }
})
</script>

render重写

<div id="app">
        <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 //子组件的阵列,可以简单理解为anchored-heading中的内容
            )
        },
        props: {
            level: {
                type: Number,
                required: true
            }
        }
    })
    var app = new Vue({
        el: "#app",
        data: {
            show:true
        }
    })
    </script>

render中的createElement

<div id="app">
    <anchored-heading :level="2">Hello world!</anchored-heading>
</div>
<script type="text/javascript">
Vue.component('anchored-heading',{
    render: function(createElement){
        var nameId = this.level
        return createElement(
            'h' + this.level, //tag name标签名称
            [
                createElement('a', {
                    attrs: {
                        href: 'https://www.baidu.com',
                        name: '#'+nameId,
                    }
                },this.$slots.default)
            ]
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})
var app = new Vue({
    el: "#app",
    data: {
        show:true
    }
})
</script>

render创建重复组件

render: function(createElement){
    return createElement('div',
        Array.apply(null, {length:10}).map(function(vale){
            return createElement('p','10个段落')
        })
    )
},

render代替模板语法v-if与v-for

模板写法

<div id="app">
    <ul v-if="items.length">
        <li v-for="item in items">{{item.name}}</li>
    </ul>
    <p v-else>No item</p>
</div>
<script type="text/javascript">
var app = new Vue({
    el: "#app",
    data: {
        items: [
            {name:"xiaoD"},
            {name:"joe"}
        ]
    }
})
</script>

render写法

<div id="app">
    <my-component v-bind:items="items">No item</my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
    props:['items'],
    render: function(creatElement){
        if(this.items.length){
            return creatElement('ul',this.items.map(function(item){
                return creatElement('li',item.name)
            }))
        }else{
            return creatElement('p',this.$slots.default)
        }
    }
})
var app = new Vue({
    el: "#app",
    data: {
        items: [
            {name:"xiaoD"},
            {name:"joe"}
        ]
    }
})
</script>