如何获取一个vue实例里的所有方法

Question

比如

<A>
    <B></B>
</A>

export default {
    methods: {
        a () {
            this.$refs.B.a();        
        }
    }
}

我想在引用A的时候，直接可以用B里的方法，但如有有10个方法我就得写10次，有没有什么方法可以拿到B实例的所有methods

因为B并不是import进来的，它是一个全局注册号了的组件，所以在这里B只是是组件，并不能拿到B对象

Answer 1

你难道想这样操作???

import B from xxx

// ...
for (let method in B.methods) {
  this[method] = B.methods[method]
}

引入的B是一个JS对象，里面有methods属性：

---

稍微完整点的写法, 大概是这样, 其实绕过来了很简单的：

import ComB from 'xxx'
// ComB就是一个JS对象，你要的东西就在ComB.methods里

export defaul {
    components: {
        B: ComB
    }
    created () {
        for (let method in ComB.methods) {
            this[method] = ComB.methods[method]
        }
    }
}

Answer 2

看了几位大佬的回答, 发现结合一下大佬的回答就可以解决问题了

就以 el-tree 为例来说吧

Tree.vue

<el-tree
  ref="elTree"
></el-tree>

import { Tree } from 'element-ui'

export default {
  name: 'Tree',
  components: { [Tree.name]: Tree },
  methods: {
    // 向上传递 el-tree 的方法
    ...Tree.methods
  }
}

MyTree.vue

<tree
  ref="tree"
  v-bind="treeProps"
></tree>

import Tree from 'plugins/Tree'

getCheckedNodes() {
  console.log('this.$refs.tree', this.$refs.tree.getCheckedNodes)
}

输出:

this.$refs.tree ƒ getCheckedNodes(leafOnly, includeHalfChecked) {
  return this.store.getCheckedNodes(leafOnly, includeHalfChecked);
}

this 是 MyTree 这个实例, 就没有 store 这个属性, 这个属性是在 el-tree 上的.

所以这种方式是不行的, 因为 this 指向不同, 而我也没找到好办法可以在这种绑定 this, 如果有大佬知道, 望不吝赐教

那就只能是在 mounted 上来绑定 this 了

mounted() {
  for (let key in this.$refs.elTree) {
    if (!(key in this) && typeof this.$refs.elTree[key] === 'function') {
      this[key] = this.$refs.elTree[key].bind(this.$refs.elTree)
      console.log('TCL: mounted -> key', key)
    }
  }
}

输出 key 看了一下, el-tree 官方文档上的方法都有, 好像还多了两个, 不过不影响使用了, 而且这样也不用再单独引入 Tree 了

至此, 也算 "完美" 解决问题了, 但还是感觉不是太优雅. 比起 $refs.$refs.$refs 来说还是这种好一点

Answer 3

1.可以直接在引用A的组件使用this.$refs.A.$children里查找到B
如: B的索引是0则: this.$refs.A.$children[0].a()
2.可以在 A 组件中代理 B 的方法如:

for(let key in this.$refs.B.$options.methods) {
      this.$options.methods[key] = this.$refs.B.$options.methods[key].bind(this.$refs.B)
}

然后在引用 A 组件的页面, 使用 this.$refs.A.a()