vue框架render方法怎么替換template

本篇內容介紹了“vue框架render方法怎么替換template”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

render方法替換template

使用template屬性創建組件模板

import Vue from 'vue'
 
const Item = Vue.component('Item', {
  template: `<div>
                <h3>子組件</h3>
                <slot></slot>
              </div>`
})
const app = new Vue({
  el: '#app',
  template: `<div ref="myDiv">              <item ref="item">
                <p ref="p">this is a slot</p>
              </item>
            </div>`,
 data: {
    count: 0  },
  components: {
    Item
  }
})

把父組件的template創建換成使用render方法創建

const app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  render (createElement) {
    return createElement(
      'div', {
        ref: 'myDiv',
        // domProps: {
        //    innerHTML: '<span>注意：添加該屬性會把后面的子節點覆蓋</span>'
        // },
        attrs: {
            id: 'test-id',
            title: 'test-title'  
        }
      },
      [
        createElement('item', {
          ref: 'item'
        },
        [
          createElement('p', {
            ref: 'p'
          }, 'this is a slot')
        ])
      ])
  },
  components: {
    Item
  }
})

1.如上面更改后的代碼，render方法內傳入createElement函數,接下來使用createElement函數來創建節點。

2.函數方法格式 createElement('節點或組件名稱'， {節點屬性}, [子節點])

3.先創建一個div元素, 內部包含ref='myDiv'的屬性, 使用數組存放其子節點

4.數組內子節點是 item組件, 屬性是 ref="item", 其子節點為p， 依次類推逐層創建子節點, 最后的文本節點使用字符串或變量即可，無需再用[]包含。

template和render用法對比

App.vue（主入口文件）

<template>
    <ParentCmp />
</template>

<script>
import ParentCmp from './ParentCmp';
export default {
    components: {
        ParentCmp
    },
}
</script>

ParentCmp.vue (template寫法)

<template>
    <div>
        <h2>我是parent組件</h2>
        <hr />
        <User  text="我是傳入的文本">
            <template v-slot:header>
                <p>這是名字為header的slot</p>
            </template>
            <p>這是填充默認slot數據</p>
            <template v-slot:footer>
                <p>這是名字為footer的slot</p>
            </template>
            <template v-slot:item="props">
                <p>名字為item的作用域插槽。顯示數據{{props}}</p>
            </template>
            <template v-slot:list="props">
                <p>名字為list的作用域插槽。顯示數據{{props}}</p>
            </template>
        </User>
    </div>
</template>

<script>
import User from './User'
export default {
    components: {
        User
    },
    props: {},
    data() {
        return {}
    },
    methods: {}
}
</script>

User.vue (template寫法)

<template>
    <div>
        <h5>{{text}}</h5>
        <slot name="header"></slot>
        <slot>默認的user slot</slot>
        <slot name="footer"></slot>
        <slot name="item" v-bind="item">item作用域插槽，展示姓名 {{item.name}}</slot>
        <slot name="list" v-bind="{list}">list作用域插槽</slot>
    </div>
</template>

<script>
export default {
    props: {
        text: String
    },
    data() {
        return {
            item: {
                name: '張三',
                age: 28,
                works: '前端、后端、設計、產品'
            },
            list: ['a','b','c']
        }
    }
}
</script>

ParentCmp.js (render寫法)

import User from './User'
export default {
    props: {},
    data() {
        return {}
    },
    methods: {},
    render(h) {
        return h('div',[
            h('h2', '我是parent組件'),
            h('hr'),
            h(User, {
                props: {
                    text: '我是傳入的文本'
                },
                style: {
                    background: '#ccc'
                },
                // 作用域插槽寫在scopedSlots里
                scopedSlots: {
                    item: props => h('p', `名字為item的作用域插槽。顯示數據${JSON.stringify(props)}`),
                    list: props => h('p', `名字為list的作用域插槽。顯示數據${JSON.stringify(props)}`)
                }
            }, 
            // 非作用域插槽寫數組里
            [
                h('p', {slot: 'header'}, '這是名字為header的slot'),
                h('p', '這是填充默認slot數據'),
                h('p', {slot: 'footer'}, '這是名字為footer的slot'),
            ])
        ]);
        // jxs寫法
        /* return (
            <div>
                <h2>我是parent組件</h2>
                <hr />
                <User 
                     
                    text="我是傳入的文本" 
                    scopedSlots={
                        {
                            item: props => (<p>名字為item的作用域插槽。顯示數據{JSON.stringify(props)}</p>),
                            list: props => (<p>名字為list的作用域插槽。顯示數據{JSON.stringify(props)}</p>),
                        }
                    }
                >
                    <p slot="header">這是名字為header的slot</p>
                    <p>這是填充默認slot數據</p>
                    <p slot="footer">這是名字為footer的slot</p>
                </User>
            </div>
        ); */
    }
}

User.js (render寫法)

export default {
    props: {
        text: String
    },
    data () {
        return {
            item: {
                name: '張三',
                age: 28,
                works: '前端、后端、設計、產品'
            },
            list: ['a', 'b', 'c']
        }
    },
    methods: {
        getSlot (name, data) {
            if (this.$scopedSlots[name]) {
                return this.$scopedSlots[name](data);
            } else if (this.$slots[name]) {
                return this.$slots[name];
            }
    
            return undefined;
        },
    },
    render (h) {
        return h('div', [
            h('h5', this.text),
            this.getSlot('header'),
            this.$slots.default,
            this.getSlot('footer'),
            this.getSlot('item', this.item),
            this.getSlot('list', {list: this.list}),
        ])
        // jxs寫法
        /* return (
            <div>
                <h5>{this.text}</h5>
                {this.getSlot('header')}
                {this.$slots.default}
                {this.getSlot('footer')}
                {this.getSlot('item', this.item)}
                {this.getSlot('list', {list: this.list})}
            </div>
        ); */
    }
}

“vue框架render方法怎么替換template”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！