vue 组件里面的方法修改外面的数据

在Vue组件内部，可以通过this.$emit方法来触发一个事件，然后在父组件中监听这个事件并响应地修改数据。这是一种组件间通信的方式，可以用来从子组件修改外面的数据。

以下是一个简单的例子：

父组件 (Parent.vue):

<template>
  <div>
    <p>{{ parentData }}</p>
    <child-component @change-data="updateData"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      parentData: 'initial data'
    };
  },
  methods: {
    updateData(newData) {
      this.parentData = newData;
    }
  }
};
</script>

子组件 (ChildComponent.vue):

 <template>
  <button @click="changeParentData">Change Parent Data</button>
</template>
 
<script>
export default {
  methods: {
    changeParentData() {
      this.$emit('change-data', 'new data');
    }
  }
};
</script>

在这个例子中，当在子组件中点击按钮时，changeParentData 方法会被调用，它通过this.$emit触发了一个名为change-data的事件，并传递了新的数据'new data'。父组件监听这个事件，并使用updateData方法来更新它的parentData。 

原文地址：https://blog.csdn.net/ljh574649119/article/details/140386560

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！