vue3父子组件相互调用方法详解

卓玛拉姆拉初

1、前言

在vue3项目开发中，我们常常会遇到父子组件相互调用的场景，下面主要以setup语法糖格式详细聊聊父子组件那些事儿

2、子组件调用父组件方法（setup组合式）


2.1 父组件Father.vue

1. <template>
   
2.         <child @sayHello="handle" />
   
3. </template>
   
4. 
   
5. <script setup>
   
6.         import Child from './components/child.vue';
   
7.         const handle = () => {
   
8.                 console.log('子组件调用了父组件的方法')
   
9.         }
   
10. </script>

复制代码

2.2 子组件Child.vue

1. <template>
   
2.         <view>我是子组件</view>
   
3.         <button @click="sayHello">调用父组件的方法</button>
   
4. </template>
   
5. 
   
6. <script setup>
   
7.         const emit = defineEmits(["sayHello"])
   
8.         const sayHello = () => {
   
9.                 emit('Hello World')
   
10.         }
    
11. </script>

复制代码

3、父组件调用子组件方法（setup组合式）


3.1 子组件Child.vue

1. <template>
   
2.         <div>我是子组件</div>
   
3. </template>
   
4. 
   
5. <script setup>
   
6. // 第一步：定义子组件的方法
   
7. const sayHello = (value) => {
   
8.         console.log(value)
   
9. }
   
10. // 第二部：暴露方法
    
11. defineExpose({
    
12.         sayHello
    
13. })
    
14. </script>

复制代码

3.2 父组件Father.vue

1. <template>
   
2.         <button @click="getChild">触发子组件方法</button>
   
3.         <child ref="childRef" />
   
4. </template>
   
5. <script setup>
   
6. import Child from './components/child.vue'
   
7. // 定义与 ref 同名变量
   
8. const childRef = ref(null)
   
9. const getChild = () => {
   
10.         // 调用子组件的方法或者变量，通过value
    
11.         childRef.value.hello("hello world！");
    
12. }
    
13. </script>

复制代码

4、简单说下选项式API的写法

1. 不推荐，vue3能写组合式就写组合式

复制代码

4.1 父组件 app.vue

1. 
   
2. <template>
   
3.   <div class="itxst">
   
4.     <!-- 使用 ref  命令 -->
   
5.     <child ref="childComp"/>
   
6.     <button @click="onClick">点击试一试</button>
   
7.   </div>
   
8. </template>
   
9. <script >
   
10. import child from "./child.vue";
    
11. export default {
    
12.   name: "app",
    
13.   //注册组件
    
14.   components: {
    
15.     child,
    
16.   },
    
17.   methods: {
    
18.     onClick: function () {
    
19.       //获取到 子组件的  数据
    
20.       let msg = this.$refs.childComp.title;
    
21.       //执行了子组件的 play方法
    
22.       this.$refs.childComp.play();
    
23.     },
    
24.   },
    
25. };
    
26. </script>

复制代码

4.2 子组件 child.vue

1. 
   
2. <template>
   
3.   <div class="itxst">
   
4.     {{ title }}
   
5.   </div>
   
6. </template>
   
7. <script>
   
8. //选项式默认当前实例是全部暴露
   
9. export default {
   
10.   name: "demo",
    
11.   //默认全部暴露 也可以通过expose控制那些需要暴露
    
12.   //expose: ['play'],
    
13.   data() {
    
14.     return {
    
15.       title: "www.itxst.com",
    
16.     };
    
17.   },
    
18.   methods: {
    
19.     play: function () {
    
20.       this.title = "你调用了子组件的方法";
    
21.     },
    
22.   },
    
23. };
    
24. </script>

复制代码

到此这篇关于vue3父子组件相互调用方法详解的文章就介绍到这了,更多相关vue3父子组件相互调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3210686p4.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！