【vue3.0学习】父传子 子传父

父传子

<template>
  <div id="app">
    <h1>父组件</h1>
    <p>{{ money }}</p>
    <Son :money="money"></Son>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  setup() {
    const money = ref(100);
    return { money };
  },
};
</script>

<style>
</style>

<template>
  <div>
    <h1>子组件</h1>
    <p>{{ money }}</p>
  </div>
</template>

<script>
export default {
  name: "Son",
  props: ["money"],
  setup(props) {
    console.log(props.money);
  },
};
</script>

<style>
</style>

子传父

<template>
  <div id="app">
    <h1>父组件</h1>
    <p>{{ money }}</p>
    <Son :money="money" @changeMoney="changeMoney"></Son>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  setup() {
    const money = ref(100);
    const changeMoney = (val) => {
      // val 是子组件传出来的值
      console.log(val);
      money.value = val;
    };
    return { money, changeMoney };
  },
};
</script>

<style>

<template>
  <div>
    <h1>子组件</h1>
    <p>{{ money }}</p>
    <button @click="changeMoney">花20元</button>
  </div>
</template>

<script>
export default {
  name: "Son",
  props: ["money"],
  setup(props, ctx) {
    console.log(props.money);
    //定义函数 抛出 值
    const changeMoney = () => {
      ctx.emit("changeMoney", 20);
    };
    return { changeMoney };
  },
};
</script>

<style>
</style>

要注意的是 不是this.$emit 来抛出自定义事件了 而是 在setup的第二个参数中的方法 emit