如何使用ref在Vue,js中触发子组件上的方法

在 Vue.js 中，可以使用 `ref` 属性来获取子组件的引用，并通过引用来调用子组件的方法。具体步骤如下：

1. 在父组件中使用 `ref` 属性来给子组件命名，例如：

   <template>
     <div>
       <child-component ref="child"></child-component>
     </div>
   </template>

在上面的例子中，`child-component` 是子组件的标签名，`ref` 属性的值为 `"child"`。

2. 在父组件的方法中使用 `$refs` 来获取子组件的引用，例如：

   export default {
     methods: {
       handleClick() {
         this.$refs.child.doSomething()
       }
     }
   }

在上面的例子中，`handleClick` 方法中使用 `$refs` 来获取名为 `"child"` 的子组件的引用，并调用子组件的 `doSomething()` 方法。

需要注意的是，使用 `ref` 获取子组件的引用并调用子组件的方法，需要保证子组件已经被创建并且已经挂载到父组件中。否则，获取到的子组件引用可能为空。

另外，使用 `ref` 获取子组件的引用并调用子组件的方法，会使父子组件之间产生高耦合性，不利于代码的维护和扩展。因此，在实际开发中，应该尽量避免使用 `ref` 来调用子组件的方法，而是使用事件或 Vuex 等其他方式来进行组件之间的通信。