vue3【父子传值】一

父传子：

父组件中

模板部分

【在父模板中的子组件标签上自定义属性名toSon，属性值为setup中的数据money】

<template>

        <div>

              <h1>父组件</h1>

              <p>{{ money }}</p>

              <Son :toSon="money"></Son>

        </div>
</template>

JS部分

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

子组件中

模板部分

<template>

    <h1>子组件</h1>
    <div>{{ toSon }}</div>
</template>

JS部分

props属性中：子组件通过自定义属性名toSon拿到数据

<script>
export default {
  props: {
    toSon: {
      type: Number,
      default: 0,
    },
  },
  setup(){
    return{}
  }
};
</script>

子传父：

通过事件传递

子组件中

模板部分

<template>

  <div>

    <h1>子组件</h1>

    <div>{{ num }}</div>

    <button @click="changeMoney">点击子组件按钮发送数据给父组件</button>

    <hr />

  </div>

</template>

JS部分

emit方法：存在于setup声明周期钩子函数的第二个参数中，向父传递自定义事件toFather

<script>
import { ref } from "vue";
export default {
  setup(props, context) {
    let num = ref(10);
    const changeMoney = () => {
      context.emit("ToFather", num);
    };
    return { num, changeMoney };
  },
};
</script>

父组件中

模板部分

【在父模板中的子组件标签上绑定自定义事件toFather】

<template>

  <div>

    <h1>父组件</h1>

    <p>{{ num }}</p>

    <Son @ToFather="fromSon"></Son>

  </div>

</template>

JS部分

<script>
import { ref } from "vue";
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  setup() {
    const num = ref(0);
    // data为子组件传递过来的数据
    const fromSon = (data) => {
      num.value = data;
    };
    return {
      num,
      fromSon,
    };
  },
};
</script>
​