Vue基础-渲染函数-父子组件-传递数据

Vue 测试版本：Vue.js v2.5.13

作了个 demo，把父子组件的数据都绑定到 Vue 实例 app 上，注释中的 template 相对好理解些

<div id="app">
        <myele :level="level">
        </myele>
        <child :level="level">
            <p>para default</p>
            <span slot="span">a span</span>
            <div slot="div">a div</div>
            <div slot="footer" slot-scope="props">{{props.text}}</div>
        </child>
    </div>

window.onload = function() { Vue.component('myele', { render(createElement) { return createElement('child', { props: { level: this.level }, scopedSlots: { footer: function(props) { return createElement('div', [createElement('span', props.text)]); } } }, [createElement('span', 'hello'), 'world']); }, /* template:` <child :level="level"> <span>hello</span>world <div slot="footer" slot-scope="props"> <span>{{props.text}}</span> </div> </child> `,*/ props: ['level'] }); Vue.component('child', { render(createElement) { let nodes0 = this.$slots.default; let nodes1 = this.$slots.span; let nodes2 = this.$slots.div; let nodes3 = this.$scopedSlots.footer({ text: 'scopedSlots-foooter' }); return createElement('h' + this.level, [nodes0, nodes1, nodes2, nodes3]); }, props: ['level'] }); new Vue({ el: '#app', data: { level: 1 } }); };

效果以下：

其实最初不是这样写的，js 是这样：

window.onload = function() { Vue.component('myele', { render(createElement) { //复杂的做用域插槽单独拎出来；
            let scopedSlotsNode = createElement('div', { scopedSlots: { footer: function(props) { return createElement('span', props.text); } } }); return createElement('child', { props: { level: this.level } }, [createElement('span', 'hello'), 'world', scopedSlotsNode]); }, /* template:` <child :level="level"> <span>hello</span>world <div> <span slot="footer" slot-scope="props"> {{props.text}} </span> </div> </child> `,*/ props: ['level'] }); Vue.component('child', { render(createElement) { let nodes0 = this.$slots.default; let nodes1 = this.$slots.span; let nodes2 = this.$slots.div; let nodes3 = this.$scopedSlots.footer({ text: 'scopedSlots-foooter' }); return createElement('h' + this.level, [nodes0, nodes1, nodes2, nodes3]); }, props: ['level'] }); new Vue({ el: '#app', data: { level: 1 } }); };

结果报错，

半天没反应过来，后来想一想，明白了，解释就在 template 里，不明白的话，再看看；

参考文档：

https://cn.vuejs.org/v2/guide/render-function.html#插槽