vue render函数实战

当我们需要页面动态改变时，就需要render函数

render函数的特点就是没有html标签 没有template模版 只有script标签 跟react很像

例子：table.vue

<script>
    export default {
        props: ['items'],
        render: function(createElement) {
            let self = this
            console.log(this)
            return createElement(
                'div', [
                    createElement('input',{
                        'class': {
                          foo: true,
                        },
                        domProps: {
                          value: self.items
                        }
                    }),
                    createElement('div', self.childinput),
                    createElement('input', {
                        domProps: {
                            value: self.childinput
                        },
                        on: {
                            input: function (event) {
                                self.childinput = event.target.value
                            }
                        }
                    })
                ]
            )
        },
        data() {
            return {
                childinput: 'childinput'
            }
        },
        watch: {
            childinput(v) {
                console.log(v)
            }
        }
    }
</script>

<style scoped>
.child {
    background: pink
}
.more {
    background: red
}
</style>

引用方式 

<template>
  <div class="nopower">
     <child :items="name">
        <h1 slot="childheader">childheader</h1>
        <h2 slot="childbody">childbody</h2>
        <h3 slot="childfooter">childfooter</h3>
     </child>
  </div>
</template>
<script>
import Vue from 'vue'
import child from './../components/table.vue'
export default {
   components: {
       child
   },
   data(){
       return {
           name:'mingzi'
       }
   },
}
</script>

有solt 有传参 简单易懂

标签传递items参数

props: ['items'],接收

昨天发了一篇extend的文章 现在想想 我们可以render一个页面 用extend可以new 多个实例 貌似可以！