Question

我希望能够将道具发送到Vuetify组件而无需在我的组件中分配每个道具，有什么办法可以让我大量传播所有道具？

下面是我目前正在做什么，但是有很多道具。”

我试图简单地扩展VSelect组件，但这会返回多个错误，似乎不容易解决！

function render(oldDom,newDom){

            function init(type) {
                if(type == '3d' ){
                    this.type = '3d'
                    this.canBeUpdated = ['rotation','scale','quaternion','position','matrix']
                }else{
                    this.type = 'html'
                    this.canBeUpdated = ['attributes','style','classname','classlist','data']
                }
            }

            // to do: investigating why appending child deletes it from the original object

            function rm(obj) {
                this.type == 'html'? oldDom.removeChild( obj ) : oldDom.remove(obj)
            }

            function ad(obj) {
                this.type == 'html'? oldDom.appendChild( obj ) : oldDom.add(obj)
            }

            oldDom.uuid == null? init('html') :  init('3d')



            function lp_array(od,nd){

                var len;
                od.length > nd.length? len = od.length : len = nd.length;// which is bigger new array or old array


                var appendPoint = od.length;// appendChild() removes the object from new object
                var removePoint = nd.length;//  removing will reset array length

                // if(len == 0){return}

                for(i = 0; i < len; i++){

                    if (!od[i]){

                        ad(nd[appendPoint])//new item was added to the state
                    }else if(!nd[i]){
                        rm(od[removePoint])// item was removed in the new state 
                    }else{
                        // console.log(oldDom.tagName,newDom.tagName,newDom.children.length,len,nd[i].className,od[i].className) 
                        render( od[i], nd[i] )
                    }

                    // console.log(  newDom['tagName'] )

                }

            }

            function up_attr(key){
                // console.log(key, newDom[key]);
                ( this.canBeUpdated.indexOf(key.toLowerCase()) !== -1 && oldDom[key] !== newDom[key]  && newDom[key] != '')? oldDom[key] = newDom[key] : null
            }

            // to do: update childNodes

            for (key in newDom){

                let txtbool = false;

                if ( key == 'childNodes' && newDom['childNodes'][0] !== undefined ) {
                    if ( newDom['childNodes'][0].nodeName == "#text" ) {
                        txtbool = true
                        // console.log(newDom['childNodes'][0])
                    }
                }else{
                    txtbool = false
                }

                (key == 'children' || txtbool == true ) ? lp_array(oldDom[key],newDom[key]) : up_attr(key)
            }
        }

Answer 1

您可以将道具作为对象传递

<v-select
  v-model="selected" 
  :items="data"
  v-bind="$props"
></v-select>

[https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object]

向Vuetify组件添加功能，大量传递道具

1 个答案: