vue组件传值超详细教程！vue实现父传子、子传父、兄弟传值，详细代码教程

ErrorVue中实现父传子、子传父、兄弟传值的方式有多种，下面是详细的代码教程：

1. 父传子：通过props属性将数据从父组件传递给子组件。

父组件：

```html
<template>
  <div>
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

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

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

子组件：

```html
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

2. 子传父：通过自定义事件将数据从子组件传递给父组件。

父组件：

```html
<template>
  <div>
    <ChildComponent @update-message="updateMessage"></ChildComponent>
    <p>Message from child component: {{ childMessage }}</p>
  </div>
</template>

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

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

子组件：

```html
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

3. 兄弟传值：通过一个共享的父组件来传递数据给兄弟组件。

父组件：

```html
<template>
  <div>
    <ChildComponent1 :message="message" @update-message="updateMessage"></ChildComponent1>
    <ChildComponent2 :message="message"></ChildComponent2>
  </div>
</template>

<script>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';

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

兄弟组件1：

```html
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

兄弟组件2：

```html
<template>
  <div>
    <p>Message from sibling component: {{ message }}</p>
  </div>
</template>

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

以上是Vue中实现父传子、子传父、兄弟传值的详细代码教程。希望对你有帮助！