vue3 <script setup>语法糖中 父组件如何调用子组件的方法

在Vue3的< script setup >语法糖中，父组件可以通过使用ref获取子组件的实例，然后调用子组件的方法。具体步骤如下：

在父组件中使用ref获取子组件的实例，例如：const childRef = ref(null);
在子组件中使用defineExpose暴露出需要暴露的属性和方法，例如：defineExpose({ childFun })
在父组件中调用子组件的方法，例如：childRef.value.childFun()。

需要注意的是，在子组件中使用defineExpose暴露出去的属性和方法才能被父组件获取到。同时，使用ref获取子组件的实例时，需要在子组件的template中使用ref属性进行绑定。

相关问题

vue3 <script setup>语法糖中 父组件如何调用子组件的方法举个例子

在Vue3中，可以使用组件的ref属性来获取子组件的实例，然后通过该实例调用子组件的方法。下面是一个例子：
假设我们有一个父组件Parent和一个子组件Child，Child组件中有一个changeNum方法，我们想在Parent组件中调用该方法。
Child组件代码如下：
<template>
<div>
<p>子组件中的数字：{{ num }}</p>
</div>
</template>

<script setup>
import { ref } from 'vue'

let num = ref(0)

function changeNum() {
num.value++
}

export { num, changeNum }
</script>

Parent组件代码如下：
<template>
<div>
<p>父组件中的数字：{{ num }}</p>
<Child ref="child" />
<button @click="changeChildNum">点击调用子组件中的方法</button>
</div>
</template>

<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

let num = ref(0)
let child = ref()

function changeChildNum() {
child.value.changeNum()
}

export { num, child, changeChildNum }
</script>

在Parent组件中，我们首先引入了Child组件，并使用ref属性获取了Child组件的实例。然后在changeChildNum方法中，通过child.value.changeNum()调用了Child组件中的changeNum方法。
注意，在使用ref属性获取子组件实例时，需要在子组件的标签上添加ref属性，如上例中的。

vue3 <script setup>父传子

在Vue 3中，可以使用<script setup>语法来编写组件。这种语法实际上是将组件的逻辑代码和模板代码进行分离，从而简化组件的编写过程。在<script setup>中，可以使用defineProps来定义组件的属性，然后通过组件的模板代码来访问这些属性。
下面是一个父组件向子组件传递属性的例子：
<template>
<div>
<p>父组件的属性：{{ parentProp }}</p>
<ChildComponent :childProp="parentProp" />
</div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { defineProps } from 'vue';

const props = defineProps({
parentProp: String,
});
</script>

在上面的例子中，我们首先使用defineProps来定义了一个名为parentProp的属性，并将其类型设置为字符串。然后，我们在模板代码中使用了这个属性，并通过:childProp的方式将其传递给了子组件。在子组件中，我们同样使用defineProps来定义了一个名为childProp的属性，并将其类型设置为字符串。这样，子组件就可以访问到父组件传递过来的属性了。
<template>
<div>
<p>子组件的属性：{{ childProp }}</p>
</div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
childProp: String,
});
</script>

以上是一个简单的父传子示例，但是在实际开发中，我们可能需要更复杂的属性传递方式，比如父组件向子组件传递函数等。在这种情况下，我们可以使用provide/inject或者事件总线等方式来实现属性的传递。