vue3 组件传值

一、父传子接
通过 props接受，在vue3里props是响应式的

image.png

二、子传父接
通过emit，由于vue3中的setup的this指向是 undefined。所以使用setup的第二个参数（context）中的emit属性去传值。

image.png

原始页面

image.png

点击改变数据后的页面

image.png

附上完整代码：
home.vue （父组件）

<template>
  <div class="box">
    <div style="border: 1px solid red" class="style">
      父组件区域
      <div>
        <p>{{ name }}</p>
        <input type="text" name="" v-model="name" id="" />
      </div>
    </div>
    <div style="border: 1px solid green" class="style">
      子组件区域
      <InFo
        :name="name"
        :sex="about.sex"
        :height="about.height"
        
        @hello="showHelloMsg"
      ></InFo>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted, toRefs } from "vue";
import InFo from "../components/info.vue";
export default {
  components: {
    InFo,
  },
  setup(props, context) {
    console.log(props, context);
    let name = ref("小明");
    let about = reactive({
      sex: "男",
      height: 180,
    });
    function showHelloMsg(data) {
      name.value = "小红";
      about.sex = "女";
      about.height = 160;
      console.log("子组件传来的数据", data);
    }
    onMounted(() => {
      console.log("页面加载时");
    });
    return {
      name,
      about,
      showHelloMsg,
    };
  },
};
</script>
<style scoped>
.box{
    display: flex;
    justify-content: space-between;
}
.style {
  width: 49%;
  text-align: center;
  padding: 16px 0px;
}
</style>

info.vue （子组件）

<template>
  <div>
    <div>
      <p>姓名：{{ name }}</p>
      <p>性别：{{ sex }}</p>
      <p>身高：{{ height }}</p>
      <button @click="hello">改变数据</button>
    </div>
  </div>
</template>
<script>
import { ref, reactive, h, onMounted, toRefs } from "vue";
export default {
  props: {
    //父传子接
    name: String,
    sex: String,
    height: Number,
  },
  emits: ["hello"], // 要声明接收到了hello事件，否则会报警告
  setup(props, context) {
    let { name, sex, height } = toRefs(props);
    let { attrs, slots, emit } = context;

    console.log(name.value);
    console.log(sex.value);
    console.log(height.value);

    function hello() {
      //调用父组件的方法并传值
      emit("hello", 666);
      //context.emit("hello", 666);
    }
    onMounted(() => {
      console.log("页面加载时");
    });
    return {
      hello,
    };
  },
};
</script>