• 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
            }
        });
    };

    效果如下:

    image

    其实最初不是这样写的,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
            }
        });
    };

    结果报错,

    image

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

    参考文档:

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

  • 相关阅读:
    Delphi XE5 android 蓝牙通讯传输
    Delphi XE5 android toast
    Delphi XE5 android openurl(转)
    Delphi XE5 如何设计并使用FireMonkeyStyle(转)
    Delphi XE5 android 捕获几个事件
    Delphi XE5 android listview
    Delphi XE5 android 黑屏的临时解决办法
    Delphi XE5 android popumenu
    Delphi XE5 android 获取网络状态
    Delphi XE5 android 获取电池电量
  • 原文地址:https://www.cnblogs.com/xianshenglu/p/8484000.html
Copyright © 2020-2023  润新知