Vue父子组件属性传递实现方法详解

<template>
  <div :style="fontstyle">
    {{ rate }}
  </div>
</template>
<script setup lang="ts">
import { computed, defineProps, withDefaults } from "Vue";
// 定义父组件传入的参数类型
interface Props {
  starCount: number;
  color: string;
}
// 规定传值类型以及赋上默认值
let props = withDefaults(defineProps<Props>(), {
  starCount: 0,
  color: "blue",
});
// 凡是计算有关的，我们都用computed来包装
const rate = computed(() =>
  "★★★★★☆☆☆☆☆".slice(5 - props.starCount, 10 - props.starCount)
);
const fontstyle = computed(() => {
  return `color:${props.color};`;
});
</script>

<template>
  <Rate starCount="3"></Rate>
  <Rate starCount="4" color="red"></Rate>
  <Rate starCount="1" color="green"></Rate>
</template>
<script setup>
import Rate from "./components/Rate.vue";
</script>

<template>
  <div style="margin: 10px; border: 2px solid red">
    我是子组件
    <button @click="transValue" style="margin: 5px;background:#caca88">传值给父组件</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
// 定义所要传给父组件的值
const num = ref<number>(0);
// 使用defineEmits注册一个自定义事件
const emit = defineEmits(["getValue"]);
// 点击事件触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件
const transValue = () => {
  num.value++;
  emit("getValue", num.value);
};
</script>

<template>
  <div class="fa">
    <div style="margin: 10px;">我是父组件</div>
    父组件接收子组件传的值：{{sonMessage}}
    <Son @getValue="getSonValue"></Son>
    <!-- <Son v-on:getValue="getSonValue"></Son> -->
  </div>
</template>
<script setup lang="ts">
import Son from './Son.vue'
import {ref} from "vue";
const sonMessage = ref<String>('0')
const getSonValue = (value: String) => {
  sonMessage.value = value
}
</script>
<style scoped>
.fa{
  border: 3px solid cornflowerblue;
  width: 400px;
  text-align: center;
}
</style>