Vue3+ts组件通讯（父传子，子传父）

Vue3+ts组件通讯（父传子，子传父）

Vue3+vite+ts+setup() {}的父子组件通讯里面包含了互相传值，传方法（里面有用到按钮vant组件，大家看需求换成自己的组件或者原生）

直接上代码-----父组件文件：Parentcomponent.vue

<!-- 父组件 -->
<template>
  <div class="iii">
    <div class="fu">父组件</div>
    <div class="ppp"><van-button type="primary" class="sss" @click="cssss()">调用子组件方法</van-button></div>
    <!-- 子组件 -->
    <Subcomponent @mingzi="fumingzi" @xiang="zuiooo" :message="messageFromParent" :form="From" :fun="fangfa" ref="funrrr"></Subcomponent>
  </div>
</template>

<script lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue';
import Subcomponent from './subcomponent.vue';
export default {
  components: { Subcomponent },
  name: '',
  setup() {
    const messageFromParent = ref<string>('我是父组件传过来的值!');
    const From = ref<object>({
      name: '李雷',
      age: '刚满18岁',
    });
    const fangfa = () => {
      console.log('我是父组件的方法，被调用了');
    };
    // -----------------------------------------------------------------
    const fumingzi = (zhi: any) => {
      console.log('父组件接收到了：', zhi.value);
    };
    const zuiooo = (dui: any) => {
      console.log('父组件接收到了：', dui.value);
    };
    // ----------------------------------------------------
    const funrrr = <any>ref();
    const cssss = () => {
      funrrr.value.funsss();
      console.log('子组件的所有内容：', funrrr.value);
    };
    onBeforeMount(() => {});
    onMounted(() => {});
    return { fumingzi, zuiooo, messageFromParent, fangfa, cssss, funrrr, From };
  },
};
</script>
<style scoped lang="scss">
.fu {
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}
.iii {
  background-color: #ffa7a7;
}
</style>

子组件文件：subcomponent.vue

<!-- 子组件 -->
<template>
  <div class="fff">
    <div class="fu">子组件</div>
    <div class="fu colors">子传父</div>
    <div class="ppp"><van-button type="primary" class="sss" @click="dianji()">传给父组件单个值</van-button></div>
    <div class="ppp"><van-button type="primary" class="sss" @click="cuixiang()">传给父组件对象</van-button></div>
    <div class="ppp"><van-button type="primary" class="sss" @click="cpppp()">接收父组件的值</van-button></div>
    <div class="ppp"><van-button type="primary" class="sss" @click="cssss()">调用父组件方法</van-button></div>
    <div class="fu">{{ message }}</div>
  </div>
</template>

<script lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue';

export default {
  name: '',
  props: {
    message: {
      type: String,
      required: true,
    },
    fun: {
      type: Function,
      required: true,
    },
    form: {
      type: Object,
      required: true,
    },
  },
  setup(props, context) {
    const zhi = ref<any>(666);
    const dui = ref<any>({
      name: '牛爱华',
      age: '刚满18岁',
    });
    const dianji = () => {
      context.emit('mingzi', zhi);
    };
    const cuixiang = () => {
      context.emit('xiang', dui);
    };
    // -------------------------------------------------------------
    const cpppp = () => {
      console.log(props.message);
    };
    const cssss = () => {
      if (typeof props.fun === 'function') {
        props.fun(); // 调用父组件传递的函数
      } else {
        console.error('fun is not a function');
      }
    };
    console.log('父传子：', props.form);
    // --------------------------------------------------------------------
    const funsss = () => {
      console.log('我是子组件的方法');
    };
    onBeforeMount(() => {});
    onMounted(() => {});
    return { dianji, cuixiang, cpppp, cssss, funsss };
  },
};
</script>
<style scoped lang="scss">
.fu {
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
}
.colors {
  color: #eb8585;
}
.sss {
  margin: 0 auto;
}
.ppp {
  width: 375px;
  height: 80px;
}
.fff {
  background-color: #b5faff;
}
</style>

补充一点，如果是使用

这种语法糖的方式的话props是这样用的：

<script setup lang="ts">
const props = defineProps({
  message: String,
});
//使用
console.log(props.message);
</script>