美文网首页
2023-09-15 在Vue中,可以通过使用this.$emi

2023-09-15 在Vue中,可以通过使用this.$emi

作者: 流泪手心_521 | 来源:发表于2023-09-14 17:51 被阅读0次

以下是一个示例代码:

父组件:

<template>
  <div>
    <child-component :data="object" @update-object="updateObject"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      object: {
        curWveIndex: 1,
        loadingwaveData: false
      }
    }
  },
  methods: {
    updateObject(newValue) {
      this.object = newValue;
    }
  }
}
</script>


子组件:

<template>
  <div>
    <button @click="updateObject">Update Object</button>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    updateObject() {
      // 修改object的值
      this.data.curWveIndex = 2;
      this.data.loadingwaveData = true;

      // 触发父组件的update-object事件,并传递新的值
      this.$emit('update-object', this.data);
    }
  }
}
</script>


相关文章

网友评论

      本文标题:2023-09-15 在Vue中,可以通过使用this.$emi

      本文链接:https://www.haomeiwen.com/subject/cdnmvdtx.html