Vue3 父子组件之间传值用法

父传子

1. 父组件

<template>
  <demo :name="goodname" :person="personList" />
</template>

<script>
import { ref, reactive } from "vue";
import demo from "./components/demo.vue";
export default {
  components: {
    demo,
  },
  setup(props) {
    //定义响应式数据
    let goodname = ref("李四");
    let personList = reactive({
      name: "张三",
      age: 18,
    });
    return {
      goodname,
      personList,
    };
  },
};
</script>

2. 子组件

<template>
  <div>
    <h3>{{ name }}</h3>
    <h3>{{ person }}</h3>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    name: String, //限制数据类型
    person: Object,
  },
  setup(props, { emit }) {
    console.log(props.name);
    console.log(props.person);
  },
};
</script>

子传父

子组件

<template>
  <div>
    <button @click="test">子传父</button>
  </div>
</template>
<script>
export default {
  emits: ["hello"], //注册父组件自定义事件,必加
  第一种写法
  //   setup(props, context) {
  //     function test() {
  //       //子传父事件方法
  //       context.emit("hello", 111);
  //     }
  //     return {
  //       test,
  //     };
  //   },
  第二中写法使用Es6语法解构context  获取emit
  setup(props, { emit }) {
    function test() {
      //子传父事件方法
      emit("hello", 111);
    }
    return {
      test,
    };
  },
};
</script>

父组件

<template>
  <demo @hello="showhello" />
</template>

<script>
import { ref, reactive } from "vue";
import demo from "./components/demo.vue";
export default {
  components: {
    demo,
  },
  setup(props) {
    function showhello(val) {
      console.log(val);
    }
    return {
      showhello,
    };
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
</style>