vue 封装组件时候如何向上传递方法?

Question

最近要封装一下 el-tree, 现在已经通过 v-bind="$attrs" 和 v-on="$listeners" 来绑定 props 和 Event, 那么 el-tree 的这些方法如何向上传递呢?

不会要在封装组件的 methods 中把这些方法挨个写一遍吧:

getCheckedNodes(leafOnly, includeHalfChecked) {
    return this.$refs.elTree.getCheckedNodes(leafOnly, includeHalfChecked);
}

Answer 1

vue.js - 如何获取一个vue实例里的所有方法 - SegmentFault 思否

Answer 2

子组件里的方法

methods: {
    aaa () {
        console.log(1)
    }
}

父组件可以拿到实例直接调用

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

this.$refs.elTree.aaa()

爷爷组件也可以直接往里拿

<my-tree ref="myTree"></my-tree>

let myTree = this.$refs.myTree
myTree.$refs.elTree.aaa()

为了好看可以在父组件里写给儿子起个名

this.tree = this.$refs.elTree

这样爷爷取得时候就是

this.$refs.myTree.tree.aaa()

Answer 3

你在外接的this.$refs.外接ref名称 里面可以访问到你组件内的$refs，就可以获取到里面的方法了

Answer 4

this.$refs.customTree 相当于拿到了你所封装组件的 this(vm) 对象，所以继续点语法获取即可

如：this.$refs.customTree.$refs.elTree.getCheckedNodes(leafOnly, includeHalfChecked)