baozhengrui

导航

vue之间的传值问题---4通过事件传递数据 this.$emit 子传父

vue2


// 子组件
<template>
  <div>
    <button @click="handleClick">传递参数</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('event-name', '传递的值');
    },
  },
};
</script>

// 父组件
<template>
  <div>
    <child-component @event-name="handleEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleEvent(value) {
      console.log(value); // 输出:传递的值
    },
  },
};
</script>



vue3

//子级
emit('provideBase',base.value)
const emit = defineEmits(['provideBae']);

// 父
< ************* @provideBase="provideBase" ***></--->
function provideBase(data){ //data就是子集的base.value
}

posted on 2024-10-14 14:28  芮艺  阅读(4)  评论(0编辑  收藏  举报