Vue3 + vite + Ts 组件之间的数据共享

父组件 与 子组件 数据共享

1、父组件 向 子组件

• 根 vue2 父组件 给 子组件 自定义属性 传递数据一样，只有 子组件 接收方式不同，子组件接收方式如下：

1.1、接收基本类型数据

• 示例代码如下：

<!--父组件，引用子组件并绑定属性-->
<CustomComponent a="哈哈哈" />

<!-- 子组件 CustomComponent -->
<template>
  <div>
    <!-- 在 HTML 中使用 -->
    <h3>{{ props.a }}</h3>
  </div>
</template>

<script setup lang="ts">
// 接受 父组件 传递过来的数据
// defineProps(["a"])	// 接收 a ，在 Templage 中能直接使用，script 中无法使用
const props = defineProps(["a"])	// 接收 a ，在 Template 和 script 中能正常使用，使用方法：props.a

console.log(props.a);
</script>

<style scoped lang="less"></style>

1.2、接收对象类型的数据，并限制类型、限制必要性和指定默认值

• 示例代码如下：
• 父组件：

<template>
  <div class="p">
    <Test ref="test" :persons="persons" />
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import Test from "@/components/Test.vue";
import { type PersonIndex } from "@/types";

const persons = reactive<PersonIndex[]>([
  {
    id: 1,
    username: "张三",
    age: 30,
  },
  {
    id: 2,
    username: "李四",
    age: 54,
  },
]);
</script>

<style>
.p {
  padding: 20px;
  background: #cdcdcd;
  border-radius: 20px;
  box-shadow: 2px 2px 6px rgba(192, 0, 0, 0.6);
}
h2 {
  color: #c00000;
}
</style>

• 子组件

<template>
  <h2>我是子组件</h2>
  <ul>
    <li v-for="item in persons" :key="item.id">{{ item.username }}</li>
  </ul>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
import { type PersonIndex } from "@/types";

withDefaults(
  defineProps<{
    persons?: PersonIndex;
  }>(),
  { // 默认值
    persons: [
      {
        id: 1,
        username: "默认值",
        age: 30,
      },
    ],
  }
);
</script>

<style lang="scss" scoped></style>

2、子组件 向 父组件

• 根 vue2 子组件 给 父组件 自定义事件传递数据一样，只是自定义事件写法不同，示例代码如下：
• 示例代码如下：

<!-- 父组件 -->
<template>
  <Test title="欢迎使用 uni-app" @on-click="send"></Test>
</template>

<script setup lang='ts'>
import Test from '@/components/Test.vue'
// 接受子组件传递过来的数据
const send = (title) => {
  console.log(title);
}
</script>

<style lang="less"></style>

<!-- 子组件 -->
<template>
    <div>
        <button @click="send">给父组件传递参数</button>
    </div>
</template>

<script setup lang='ts'>

// 子组件给父组件传递参数
const emit = defineEmits(['on-click'])
const send = () => {
    emit('on-click', '我是 子组件 给 父组件 传递的参数')
}

</script>

<style scoped lang="less">

</style>

子组件 给 父组件 暴露属性或方法

• 示例代码如下：

<!-- 父组件 -->
<template>
  <Test ref="waterFall" title="中华人民共和国" @on-click="send"></Test>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import Test from '@/components/Test.vue'

const waterFall = ref<InstanceType<typeof Test>>()

onMounted(() => {
  console.log(waterFall.value?.name);
  waterFall.value?.show()
})

</script>

<style lang="less"></style>

<!-- 子组件 -->
<template>
    <div>
        <h2>我是 Test 子组件</h2>
    </div>
</template>

<script setup lang='ts'>

// 给父组件暴露属性或方法
defineExpose({
    name: '乌云巴根',// 暴露的属性
    show: () => console.log('我是子组件暴露的方法')	// 暴露的方法
})
</script>

<style scoped lang="less"></style>

兄弟组件之间共享数据

• Mitt 库，安装

npm install mitt -S

• 全局注册

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import mitt from "mitt";

// 创建 Vue 实例对象
const app = createApp(App);

// 创建 Mit
const Mit = mitt();
declare module "vue" {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit;
  }
}
app.config.globalProperties.$Bus = Mit;

// 使用 ElementPlus
app.use(ElementPlus, { size: "small", zIndex: 3000 });
app.mount("#app");

• 使用方法，示例代码如下：

<!-- 数据发送方 -->
<template>
    <div>
        <h2>我是 Card 组件</h2>
        <button @click="send">传递数据</button>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const send = () => {
    instance?.proxy?.$Bus.emit('on-qilue', '欢迎使用 uni-app')
}

</script>

<style scoped></style>

<!-- 数据接收方 -->
<template>
    <div>
        <h2>我是 Test 组件</h2>
        {{ str }}
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, getCurrentInstance } from 'vue'

// 接收兄弟组件传递过来的数据
const str = ref<string>()
const instance = getCurrentInstance()

instance?.proxy?.$Bus.on('on-qilue', (val) => {
    str.value = val
})

</script>

<style scoped></style>