在这里插入图片描述

子传父:触发自定义事件的时候emit来自 setup(props,{emit}){ // emit 就是触发事件函数 }

父组件:

<template>
  <div id="container">
    <h1>父组件</h1>
    <div>{{ money }}</div>
    <hr />
    <son-two :mon="money" @change-money="unpdataMoney"></son-two>
  </div>
</template>
<script>
import { ref } from "vue";
import SonTwo from "./SonTwo.vue";
export default {
  name: "App",
  components: {
    SonTwo,
  },
  setup() {
    const money = ref(101);
    const unpdataMoney = (newMoney) => {
      money.value = money.value- newMoney;
    };
    return { money, unpdataMoney };
  },
};
</script>
<style lang='less' scoped>
</style>

子组件:

<template>
  <div id="container">
      <h3>子组件</h3>
      <div>子组件内容:{{mon}}</div>
      <button @click="changeMoney">-1按钮</button>
  </div>
</template>
<script>
import { onMounted } from 'vue'
export default {
  name: "SonTwo",
  props: {
    mon: {
      type: Number,
      default: 0
    }
  },
  /**
   * props 父组件数据
   * emit 触发自定义事件函数
   */
  setup(props,{emit}) {
    // 获取父组件的数据money
    console.log(props.mon)
    // 向父组件传值
    const changeMoney = () => {
        emit('change-money',1)
    }
    return { changeMoney};
  },
};
</script>
<style lang='less' scoped>
</style>

console面板:

 setup(props,context) {
    // 获取父组件的数据money
    console.log(props.mon)
    console.log(context)
    // 向父组件传值
    const changeMoney = () => {
        context.emit('change-money',1)
    }
    return { changeMoney};
  },

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐