vue中父子组件之间如何共享数据

在Vue中，父子组件之间可以通过props和$emit来实现数据的共享。

1. 使用props传递数据：
父组件可以通过props属性将数据传递给子组件。在子组件中，可以通过props选项接收父组件传递的数据，并在子组件中使用。

// 父组件
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent component'
    };
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

2. 使用$emit触发事件：
子组件可以通过$emit方法触发一个自定义事件，并将数据作为参数传递给父组件。在父组件中，可以通过监听子组件触发的事件来获取子组件传递的数据。

// 父组件
<template>
  <div>
    <child-component @message-updated="updateMessage"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
 },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-updated', 'Hello from child component');
    }
  }
};
</script>

这样，父组件就可以通过props接收子组件传递的数据，子组件也可以通过$emit触发事件将数据传递给父组件。