vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)

一，js代码

1,Child.vue

2,Father.vue

<template>
<div>
  <div>这是父组件div>
  <child ref="child" default="cn" top="jp,us,uk" @eventMsg="childCall">child>
  <button @click="callChildMethod">父组件调用子组件的方法button><br/>
  <button @click="callChildData">父组件访问子组件的数据button>
div>
template>

<script>
import {ref} from 'vue'
import Child from './Child.vue'
export default {
  name: "FatherComp",
  components:{
    Child,
  },
  setup() {
    // 获取子组件
    const child = ref(null)
    //调用子组件中的方法
    const callChildMethod = () => {
      child.value.childAlert();
    }
    //访问子组件中的数据
    const callChildData = () => {
      alert("子组件中的变量:childName:"+child.value.childName);
    }
    
    //接收子组件发送的数据
    const childCall = (childData) => {
      alert("子组件传过来的参数:"+childData);
    }

    return {
      callChildMethod,
      callChildData,
      child,
      childCall,
    }
  }
}
script>

<style scoped>

style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

三，查看vue框架的版本:

liuhongdi@lhdpc:/data/vue/child$ npm list vue
child@0.1.0 /data/vue/child
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped