Vue3中的父子、子父组件通信

<!-- 在父组件中定义一些参数传给子组件 -->
<template>
  <Child :datas="datas" />
</template>
<script>
import { defineComponent } from 'vue'
import Child from '...'
export default defineComponent({
  // 定义一些数据并return给template用
  setup () {
    const datas = {hello:"world"};
    return{
      datas
    }
  },
  components:{
    Child
  }
})
</script>

<template>
  <div id="child" @click="clicked" ></div>
</template>
<script>
import { defineComponent } from 'vue'
import Child from '...'
export default defineComponent({
  name:"Child",
  props: {
    datas: {
      type: Object,
      default: {hello: undefined}
    }
  },
  setup (props) {
    let datas = (props as any).datas;
    const hello = datas["hello"]
    return{
      hello 
    }
  },
  methods:{
    clicked(){
      alert(this.hello)
    }
  },
  components:{
    Child
  }
})
</script>

<!-- 父组件中定义好给子组件玩的方法 -->
<template>
  <ChildCpnt />
</template>
<script>
import ChildCpnt from "xxx"
export default{
   ...
   methods:{
     ftFunc(param){
       console.log(param);
     }
   },
   components:{
     ChildCpnt,
   }
}
</script>

<!-- 子组件中玩父组件的方法 -->
<template>
  <div @click="paly" ></div>
</template>
<script>
...
export default{
   ...
   methods:{
     play(){
       const param = "play";
       this.$emit("ftFunc",param);
     }
   }
}
</script>

<template>
  ...
  <div  v-if="!isCollapse" >
    <!--需要通过`@子组件接收的函数名="父组件定义的函数的函数名"`将函数传给子组件-->
    <Child
      v-for="(item,index) in datas['children']" :key="index" 
      :datas="item" 
      @addLevel3Height="addLevel3Height"
      @dropLevel3Height="dropLevel3Height"  />
  </div>
</template>
<script lang="ts">
...
export default defineComponent({
  name: 'Father',
  ...
  methods:{
    ...
    // 在父组件中定义好给子组件玩的函数
    addLevel3Height(len:number){
      this.level1SubHeight = (parseInt(this.level1SubHeight.replace("px","")) + len*46).toString() + "px";
      console.log(this.level1SubHeight);
    },
    dropLevel3Height(len:number){
      this.level1SubHeight = (parseInt(this.level1SubHeight.replace("px","")) - len*46).toString() + "px";
      console.log(this.level1SubHeight);
    },
  },
  components:{
    Child
  }
});
</script>

<template>
  <div @click="play" class="menu-level-2">
      <div class="menu-level-2-text">{{datas['name']}}</div>
  </div>
</template>
<script lang="ts">
...
export default defineComponent({
  name: 'Child',
  props: {
    ...
  },
  // 在子组件中通过`emits`来接收父组件闯过来的方法，用来从子组件向父组件通信。
  // 使用上看就和`props`接收父组件的数据使用上类似
  emits:[
    "addLevel3Height",
    "dropLevel3Height"
  ],
  setup(props, ctx){
    ...
    return {
      ctx,
    }
  },
  methods:{
    // 在子组件中玩父组件中的放啊
    play(){
      if(this.expendLevel3===false){
        this.expendLevel3 = true;
        // 使用`ctx.emit`而不是`this.emit`
        this.ctx.emit("addLevel3Height", this.datas['children'].length) 
      }
      else{
        this.expendLevel3 = false;
        this.ctx.emit("dropLevel3Height", this.datas['children'].length)
      }
    }
  }
});
</script>

import { createApp } from 'vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
const app = createApp(App)
axios.defaults.baseURL = '/api'
app.config.globalProperties.$rqst= axios       // 挂载一个全局参数 $rqst
app.config.globalProperties.$dataCtainer = {}  // 挂载一个全局参数 $dataCtainer
app.use(VueAxios, axios).use(store).use(router).mount('#app')

<template>
...
</template>
<script>
import { defineComponent, getCurrentInstance } drom 'vue'
export default defineComponent({
  setup(props){
    const { proxy } = (getCurrentInstance() as any);      // 全局变量代理
    return{
      proxy
    }
  },
  methods:{
    getDatas(user:string){
      // 可以在方法中使用 proxy.全局参数名
      this.proxy.$rqst.post('/xxx/xxx',{"user":user})
      .then((response: any)=>{
        let dt = response.data.xxx;
        ...
      });
    },
  }
})
</script>