1.父传子

index.vue

<template>
  我是父组件
  <Child :str="str" />
</template>

<script setup>
  import Child from "./Child.vue";
  import { ref } from "vue";

  const str= ref("m");  // 传给子组件的值
</script>

Child.vue

<template>
  我是子组件 
  <div>从父组件传进来的值：{{ str}}</div>
</template>

<script setup>
  // 使用 defineProps 声明 props
  const props = defineProps({
    str: {
      type: String,
      default: "",
    },
  });
</script>

2.子传父

index.vue

<template>
  我是父组件
  <child @childChange="childChange" />
  <p>{{ str}}</p>
</template>

<script setup>
  import Child from "./Child.vue";
  import { ref } from "vue";

  const str= ref("");  // 从子组件传出的值
    // 组件的自定义事件
  const childChange = (val) => {
    str.value = val;
  };
</script>

Child.vue

<template>
  我是子组件 
 <el-button @click="handleClick">点我触发自定义事件</el-button>
</template>

<script setup>
     // 使用 defineEmits 声明 emits
  const emit = defineEmits(["childChange"]);
  const handleClick = () => {
    // 必须经过defineEmits声明，不然方法无效！
    emit("childChange", "我是经自定义方法传出的值");
  };
  });
</script>