二.Vue3.x（通信）

前言

补充一些官方文档中没有的，但是实际开发中最好需要了解的内容

1. props

父组件数据

<template>
  <ChildComponent :parentData="parentData" />
</template>
 
<script setup >
import { ref } from 'vue';
import ChildComponent from './PropsChildComponent.vue';
 
const parentData = ref('父组件数据');
</script>

<template>
  <div>{{ parentData }}</div>
</template>

<script setup >
import { defineProps } from "vue";
const { parentData } = defineProps({
  parentData: {
    type: String,
    default: "",
  },
});
</script>

2. $emit

父组件数据

<template>
  <ChildComponent :parentData="parentData" />
</template>
 
<script setup >
import { ref } from 'vue';
import ChildComponent from './EmitChildComponen.vue';
 
const parentData = ref('父组件数据');
</script>

<template>
  <div @click="emitEvent">{{ parentData }}</div>
</template>

<script setup >
import { defineProps, defineEmits } from "vue";
const { parentData } = defineProps({
  parentData: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(['send'])
function emitEvent(){
  emit('send','child-message')
}
</script>

const props = withDefaults(
    defineProps<{
      lotteryList: { pic: string; name?: string }[];
      winId: number;
      initSpeed: number;
      fastSpeed: number;
      slowSpeed: number;
      baseCircles: number;
      classPrefix: string;
    }>(),
    {
      lotteryList: () => [],
      winId: 0,
      initSpeed: 300,
      fastSpeed: 100,
      slowSpeed: 600,
      baseCircles: 4,
    }
  );这里的withDefaults是什么?

2. $emit

3. expose / ref

<template>
  <child ref="comp"></child>
  <el-button @click="handlerClick">按钮</el-button>
</template>
<script setup>
import { ref } from "vue";
import child from "./ExposeChildCompone.vue";
const comp = ref(null);
const handlerClick = () => {
  console.log(comp.value.childName); // 获取子组件对外暴露的属性
  comp.value.someMethod(); // 调用子组件对外暴露的方法
};
</script>

<script setup>
  import { defineExpose } from "vue"
  defineExpose({
      childName: "这是子组件的属性",
      someMethod(){
          console.log("这是子组件的方法")
      }
  })
</script>

4. attrs

a：1

a：1

x：100

y：200

<template>
  <h4>a：{{ a }}</h4>
  <Child :a="a" v-bind="{x:100,y:200}" :updateA="updateA"/>
</template>

<script setup >
import {ref} from 'vue'
import Child from './AttrsChildCompone.vue'

let a = ref(1)

function updateA(value) {
a.value += value
}
</script>

<template>
  <GrandChild v-bind="$attrs" />
</template>

<script setup >
import GrandChild from "./AttrsGrandCompone.vue";
</script>

5. v-model

<template>
  <child ref="comp"></child>
  <el-button @click="handlerClick">按钮</el-button>
</template>
<script setup>
import { ref } from "vue";
import child from "./ExposeChildCompone.vue";
const comp = ref(null);
const handlerClick = () => {
  console.log(comp.value.childName); // 获取子组件对外暴露的属性
  comp.value.someMethod(); // 调用子组件对外暴露的方法
};
</script>

<script setup>
  import { defineExpose } from "vue"
  defineExpose({
      childName: "这是子组件的属性",
      someMethod(){
          console.log("这是子组件的方法")
      }
  })
</script>

6. provide / inject

宝马10

<template>
  <div>{{ parentData }}</div>
  <ChildComponent></ChildComponent>
</template>

<script setup>
import {ref, reactive, provide} from 'vue'
import ChildComponent from './ProvideChildCompone.vue';
let money = ref(100)
let car = reactive({
  brand: '宝马',
  price: 10
})
function updateMoney(value) {
  money.value -= value
}
// 向后代提供数据
provide('moneyContext', {money, updateMoney})
provide('car', car)
</script>

<template>
  <div>{{ car.brand + car.price }}</div>
</template>

<script setup >
import { inject } from "vue";

let { money, updateMoney } = inject("moneyContext", {
  money: 0,
  updateMoney: (param) => {},
});
let car = inject("car", { brand: "未知", price: 0 });
</script>

7. Vuex

8.mitt

• 1.首先全局引入

import { createApp } from "vue";
const app = createApp({});
import mitt from "mitt";
app.config.globalProperties.$bus = mitt();
app.provide("$bus", $bus);

• 2.订阅数据

...
setup(){
  const $bus = inject("$bus")
  $bus.on('customEvent', () => console.log('i got customEvent')
}
...

• 3.发布数据

...
setup(){
  const $bus = inject("$bus")
  $bus.emit("customEvent");
}
...