找到任意组件实例的方法
由一个组件,向上找到最近的指定组件
/** ?* 由一个组件,向上找到最近的指定组件 ?* @param {*} context 当前上下文,比如你要基于哪个组件来向上寻找,一般都是基于当前的组件,也就是传入 this ?* @param {*} componentName 要找的组件的 name ?*/ function findComponentUpward(context, componentName) { ? let parent = context.$parent ? let name = parent.$options.name ? while (parent && (!name || [componentName].indexOf(name) < 0)) { ? ? parent = parent.$parent ? ? if (parent) name = parent.$options.name ? } ? return parent }
由一个组件,向上找到所有的指定组件
/** ?* 由一个组件,向上找到所有的指定组件 ?* @param {*} context 当前上下文,比如你要基于哪个组件来向上寻找,一般都是基于当前的组件,也就是传入 this ?* @param {*} componentName 要找的组件的 name ?*/ function findComponentsUpward(context, componentName) { ? let parents = [] ? const parent = context.$parent ? if (parent) { ? ? if (parent.$options.name === componentName) parents.push(parent) ? ? return parents.concat(findComponentsUpward(parent, componentName)) ? } else { ? ? return [] ? } }
由一个组件,向下找到最近的指定组件
/** ?* 由一个组件,向下找到最近的指定组件 ?* @param {*} context 当前上下文,比如你要基于哪个组件来向上寻找,一般都是基于当前的组件,也就是传入 this ?* @param {*} componentName 要找的组件的 name ?*/ function findComponentDownward(context, componentName) { ? const childrens = context.$children ? let children = null ? if (childrens.length) { ? ? for (const child of childrens) { ? ? ? const name = child.$options.name ? ? ? if (name === componentName) { ? ? ? ? children = child ? ? ? ? break ? ? ? } else { ? ? ? ? children = findComponentDownward(child, componentName) ? ? ? ? if (children) break ? ? ? } ? ? } ? } ? return children }
由一个组件,向下找到所有指定的组件
/** ?* 由一个组件,向下找到所有指定的组件 ?* @param {*} context 当前上下文,比如你要基于哪个组件来向上寻找,一般都是基于当前的组件,也就是传入 this ?* @param {*} componentName 要找的组件的 name ?*/ function findComponentsDownward(context, componentName) { ? return context.$children.reduce((components, child) => { ? ? if (child.$options.name === componentName) components.push(child) ? ? const foundChilds = findComponentsDownward(child, componentName) ? ? return components.concat(foundChilds) ? }, []) }
由一个组件,找到指定组件的兄弟组件
/** ?* 由一个组件,找到指定组件的兄弟组件 ?* @param {*} context 当前上下文,比如你要基于哪个组件来向上寻找,一般都是基于当前的组件,也就是传入 this ?* @param {*} componentName 要找的组件的 name ?* @param {*} exceptMe 是否把本身除外 ?*/ function findBrothersComponents(context, componentName, exceptMe = true) { ? let res = context.$parent.$children.filter((item) => { ? ? return item.$options.name === componentName ? }) ? let index = res.findIndex((item) => item._uid === context._uid) ? if (exceptMe) res.splice(index, 1) ? return res }
vue常用组件库
移动端常用组件库
1.Vant https://youzan.github.io/vant
2.CubeUI https://didi.github.io/cube-ui
3.MintUI https://mint-ui.github.io
3.NutUI https://nutui.jd.com / // 京东自己的
pc端常用组件库
1.ElementUI https://element.eleme.cn
2.IViewUI https://www.iviewui.com
2.AntDesignUI https://ant.design/
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did120846