Uniapp调用子组件方法教程

一、使用this.$refs调用子组件方法

在Uniapp中，如果我们想要调用单个子组件的方法，可以通过this.$refs来实现。我们可以在子组件中加入ref属性来指定子组件的名称，然后在父组件中使用this.$refs来获取到该子组件的实例，从而调用该子组件的方法。

示例代码如下：

// 子组件
<template>
  <div>
    <button @click="childSayHello">子组件方法调用</button>
  </div>
</template>

<script>
export default {
  methods: {
    childSayHello() {
      console.log("Hello from child component!");
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childSayHello();
    }
  }
}
</script>

在上面的代码中，我们在子组件中定义了一个childSayHello方法，在父组件中引入了该子组件，并给它加上了ref属性。在父组件的method中，我们通过this.$refs.child来获取到这个子组件的实例，然后就可以调用该子组件的childSayHello方法了。

二、调用多个子组件的方法

有时候我们需要调用多个子组件的方法，此时我们可以使用数组的方式来存储多个子组件的实例。示例代码如下：

// 子组件1
<template>
  <div>
    <button @click="child1SayHello">子组件1方法调用</button>
  </div>
</template>

<script>
export default {
  methods: {
    child1SayHello() {
      console.log("Hello from Child Component 1!");
    }
  }
}
</script>

// 子组件2
<template>
  <div>
    <button @click="child2SayHello">子组件2方法调用</button>
  </div>
</template>

<script>
export default {
  methods: {
    child2SayHello() {
      console.log("Hello from Child Component 2!");
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component1 ref="child1"></child-component1>
    <child-component2 ref="child2"></child-component2>
    <button @click="callMultipleChildMethods">调用多个子组件方法</button>
  </div>
</template>

<script>
import ChildComponent1 from "@/components/ChildComponent1.vue";
import ChildComponent2 from "@/components/ChildComponent2.vue";

export default {
  components: {
    ChildComponent1,
    ChildComponent2
  },
  methods: {
    callMultipleChildMethods() {
      const child1 = this.$refs.child1;
      const child2 = this.$refs.child2;
      child1.child1SayHello();
      child2.child2SayHello();
    }
  }
}
</script>

在上面的代码中，我们定义了两个子组件和一个父组件，分别通过ref属性来指定子组件的实例名称。在父组件中的method中，我们先获取到这两个子组件的实例，然后依次调用他们的child1SayHello和child2SayHello方法。

三、给子组件设置ref属性

有时候我们想要动态设置子组件的名称，此时我们需要为子组件设置ref属性。可以通过v-bind:ref动态绑定ref属性。示例代码如下：

// 子组件
<template>
  <div>
    <button @click="childSayHello">子组件方法调用</button>
  </div>
</template>

<script>
export default {
  methods: {
    childSayHello() {
      console.log("Hello from child component!");
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component v-bind:ref="childName"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childName: "child1"
    }
  },
  methods: {
    callChildMethod() {
      this.$refs.child1.childSayHello();
    }
  }
}
</script>

在上面的代码中，我们在父组件的data中定义了一个childName变量，并将其绑定到子组件的ref属性上。在父组件的method中，我们直接通过this.$refs.child1来获取到这个子组件实例，并调用其方法，这里的child1就是我们动态绑定的ref属性的值。