vue3.0 父子组件传值

父子组件传值

父传子 props

方式 1：原始的 props 传值，不限制类型

父组件

<template>
  <div>
    父组件 -- {{ num }}
    <RegChild :num="num" />
  </div>
</template>

<script>
import RegChild from "./childCom/RegChild";
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Reg",
  components: {
    RegChild,
  },
  setup() {
    let num = ref(0);
    return {
      num,
    };
  },
});
</script>

子组件

<template>
  <div>
    <div>子组件 -- {{ num }}</div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "RegChild",
  components: {},
  props: ["num"],
  setup(proos) {
    let state = reactive({
      num: proos.num,
    });
    return {
      ...state,
    };
  },
});
</script>

方式 2：使用 provide && inject

父组件

<template>
  <div>
    <RegChild />
  </div>
</template>

<script>
import RegChild from "./childCom/RegChild";
import { defineComponent, onMounted, ref, provide } from "vue";
export default defineComponent({
  name: "Reg",
  components: {
    RegChild,
  },
  setup() {
    provide("num", 88);
    return {};
  },
});
</script>

子组件

<template>
  <div>
    <div>子组件 -- {{ num }}</div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, inject } from "vue";
export default defineComponent({
  name: "RegChild",
  components: {},
  props: ["num"],
  setup() {
    //proos
    let state = reactive({
      num: inject("num"),
    });
    return {
      ...state,
    };
  },
});
</script>

父组件

• 父组件修改 count 的值，然后传值给子组件
• 父组件修改 userInfo 之中的 username 的值，传递给子组件
• 注意点：就是在子组件之中，使用 v-model的时候，子组件可以修改父组件的值

<template>
  <div>
    <div>
      父组件count的值 -- {{ count }} 父组件username的值 -- {{ username }}
    </div>
    <div>
      修改count
      <button @click="addCount">修改count</button>
    </div>
    <div>
      修改username
      <button @click="setUsername">修改username</button>
    </div>
    <RegChild />
  </div>
</template>

<script>
import RegChild from "./childCom/RegChild";
import { defineComponent, provide, ref, reactive, toRefs } from "vue";
export default defineComponent({
  name: "Reg",
  components: {
    RegChild,
  },
  setup() {
    let count = ref(0);
    const addCount = () => {
      count.value = count.value + 1;
    };
    let userInfo = reactive({
      username: "张三",
    });
    const setUsername = () => {
      userInfo.username = "李四";
    };
    provide("count", count);
    provide("userInfo", userInfo);
    return {
      count,
      addCount,
      ...toRefs(userInfo),
      setUsername,
    };
  },
});
</script>
<style lang="scss" scoped></style>

子组件

<template>
  <div>
    <div>子组件count --- {{ count }}</div>
    <div>子组件username --- {{ userInfo.username }}</div>
    <div>
      子组件的input修改 父组件的数据
      <input type="text" v-model="userInfo.username" />
    </div>
  </div>
</template>

<script>
import { defineComponent, inject, reactive, watchEffect } from "vue";
export default defineComponent({
  name: "RegChild",
  components: {},
  setup() {
    let count = inject("count");
    let userInfo = inject("userInfo");
    return {
      count,
      userInfo,
    };
  },
});
</script>
<style lang="scss" scoped></style>