找到任意组件实例的方法
由一个组件,向上找到最近的指定组件
/** * 由一个组件,向上找到最近的指定组件 * @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/
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。