美文网首页Vue.js
VUE自己写方法并注册到组件里面。

VUE自己写方法并注册到组件里面。

作者: 吴孝青 | 来源:发表于2018-04-09 16:59 被阅读5次

比如myfunction.js文件

module.exports={
    /*
     * 单一数组转根据ID和PID转日录树
     * 用法,listToTree(array,{
     *  "idKey":"id",//id
     *  "parentKey":"parent",//父ID
     *  "children":"children"//子ID名
     * });
     * @date 数据组
     * @options 格式化方法 传入 ID PID 和子目录名
     */
    //listToTree:function (data, options) {
    listToTree:function (data, {idKey='id',parentKey="pid",childrenKey='children'}={}) {
        /*options = options || {};
        let ID_KEY = options.idKey || 'id';
        let PARENT_KEY = options.parentKey || 'pid';
        let CHILDREN_KEY = options.childrenKey || 'children';*/

        let tree = [],childrenOf = {},length = data.length;
        let item,id,parentId;

        for (let i = 0; i < length; i++) {
            item = data[i];
            id = item[idKey];
            parentId = item[parentKey] || 0;
            // every item may have children
            childrenOf[id] = childrenOf[id] || [];
            // init its children
            item[childrenKey] = childrenOf[id];
            if (parentId != 0) {
            // init its parent's children object
            childrenOf[parentId] = childrenOf[parentId] || [];
            // push it into its parent's children object
            childrenOf[parentId].push(item);
            } else {
                tree.push(item);
            }
        }

    return tree;
    } 
        //可以写多个方法或是自己定义变量。
}

再到main.js里面注册

import myfunctionfrom './components/common/myfunction.js'
Vue.prototype.$comFun = myfunction

在组件里直接调用

this.$comFun.listToTree(data);

这样就可以把自已经常会用的函数和值存在里面调用。但一定要保证调用时this指向的是VUE。

相关文章

  • VUE自己写方法并注册到组件里面。

    比如myfunction.js文件 再到main.js里面注册 在组件里直接调用 这样就可以把自已经常会用的函数和...

  • 父子组件传值

    子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面父组件这么写 子组件component-...

  • vue UI组件开发

    1. 新建组件: Vue.component 方法用于注册全局组件,new Vue({ components: {...

  • Vue组件创建和传值

    Vue创建组件的方式 使用Vue.Extend()和Vue.component全局注册组件 首先我们定义一个组件并...

  • 组件

    注册组件 注册组件分为全局注册和局部注册。 全局注册 step1.用Vue.component()方法定义一个组件...

  • 7. 组件

    使用vue.component('组件名',{componentConfig})全局注册 注册到vue的confi...

  • Vue2.0 使用组件

    src目录结构 在components中编辑组件apple.vue: 在App.vue中注册并使用组件

  • Vue磨刀嚯嚯

    Vue开发风格——传统方法应用vue.js Vue开发风格——单个组件式 组件 基本操作 创建一个组件构造器 注册...

  • 组件化实例化过程&&编译原理

    组件化: 组件声明、注册: 全局api:initAssetRegister(Vue) 声明三个方法componen...

  • Vue-Element(一)项目的创建

    说明 自用资料: vue实现动态注册并渲染组件 版本 vue: 2.9.6webpack: 3.12.0 一、安装...

网友评论

    本文标题:VUE自己写方法并注册到组件里面。

    本文链接:https://www.haomeiwen.com/subject/dzbihftx.html