《vue3方法调用》

解决方案

在Vue3项目开发中，方法调用是实现功能逻辑交互的重要部分。为了正确且高效地进行方法调用，需要遵循Vue3的响应式原理和组件化规范。确保方法能够准确获取数据、触发事件，并且能与其他组件或元素良好交互。

基本的方法定义与调用

在Vue3的组合式api（Composition API）中，可以在<script setup>标签内或者setup()函数里定义方法。例如：

javascript</p>


// 定义一个简单的方法
const sayHello = () => {
    console.log('hello');
}


<p>
  <!-- 调用方法 -->
  <button>点击我</button>

当点击按钮时就会触发sayHello方法执行，在控制台打印出“hello”。

方法调用中的参数传递

有时候我们需要给方法传递参数。如：

javascript</p>


import { ref } from 'vue'
const count = ref(0);
const increment = (num) => {
    count.value += num;
}


<p>
  <div>
    <p>{{count}}</p>
    <button>增加2</button>
  </div>

``<code>
这里通过点击按钮将2作为参数传递给increment方法，从而改变count`的值并显示在页面上。

父子组件间方法调用

父组件调用子组件方法

在父组件中可以通过模板引用的方式调用子组件方法。

子组件：
```javascript


const childMethod = () => {
    console.log('子组件方法');
}
defineExpose({childMethod});



  
子组件

父组件：
```javascript

import Child from './Child.vue';
import { ref, onMounted } from 'vue';
const childRef = ref(null);
onMounted(() => {
childRef.value.childMethod();
})

```