一、使用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属性的值。