vue3.0父子组件传值实现-compositionAPI

vue3.0父子组件传值实现-compositionAPI

父组件Father.vue

<template>
  <div>
    父组件
    <h1>{{ count }}</h1>
    <button @click="increment">父组件+</button>
    <child :count="count" @increment:count="increment"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
import { ref } from "vue";
export default {
  components: {
    Child,
  },
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment,
    };
  },
};
</script>

<style></style>

子组件Chlid.vue

<template>
  <div>
    子组件
    <h1>{{newCount}}</h1>
    <button @click="increment">子组件+</button>
  </div>
</template>

<script>
import {computed} from "vue"
export default {
  props: {
    count: Number,
  },
  setup(props, { emit }) {
    const newCount = computed({
      get: () => props.count,
      set: (value) => emit("increment:count"),
    });
    const increment=()=>{
        newCount.value++
    }
    return {
      newCount,
      increment,
    };
  },
};
</script>

<style></style>