vue父子组件传递数据-兄弟组件传递数据

1.父向子传递数据

父组件中传递数据 ↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <child :message="parentMessage"></child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

子组件中接收数据 ↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

2.子组件向父组件传递数据

子组件中派发事件 ↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child')
    }
  }
}
</script>

父组件中监听事件并接收数据 ↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <child @message="receiveMessage"></child>
    <div>{{ parentMessage }}</div>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: ''
    }
  },
  methods: {
    receiveMessage(message) {
      this.parentMessage = message
    }
  }
}
</script>

3.子组件通过$emit方法调用父组件的函数

父组件中定义函数↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <child @childClick="handleClick"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  methods: {
    handleClick(event) {
      console.log('Received: ' + event)
    }
  }
}
</script>

子组件中调用父组件的函数↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <button @click="emitClick">Send message to parent</button>
  </div>
</template>
<script>
export default {
  methods: {
    emitClick() {
      this.$emit('childClick', 'Hello from child')
    }
  }
}
</script>

4.父组件调用子组件的函数（ref，$resf）

子组件↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello from child component!'
    }
  },
  methods: {
    childFunc(param1, param2) {
      console.log(`Child function called with parameters: ${param1}, ${param2}`);
      this.message = 'Child function was called';
    }
  }
}
</script>

父组件↓ ↓ ↓ ↓ ↓ ↓

通过this.$refs.childRef获取子组件的引用，并调用其中的childFunc()函数。在这里，我们传入了两个参数：'Hello'和'World'。

<template>
  <div>
    <button @click="callChildFunc">Call child component function</button>
    <Child ref="childRef"></Child>
  </div>
</template>
<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  methods: {
    callChildFunc() {
      this.$refs.childRef.childFunc('Hello', 'World');
    }
  }
}
</script>

5.兄弟组件传递数据（vue3）

兄弟A↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <p>{{ dataFromA }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataFromA: 'Data from Component A'
    }
  },
  provide: {
    sharedData: this.dataFromA
  }
}
</script>

兄弟B↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData']
}
</script>

兄弟组件传递数据（vue2）

兄弟A↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <p>{{ dataFromA }}</p>
    <button @click="emitData">Send Data to Component B</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataFromA: 'Data from Component A'
    }
  },
  methods: {
    emitData() {
      this.$emit('my-event', this.dataFromA);
    }
  }
}
</script>

兄弟B↓ ↓ ↓ ↓ ↓ ↓

<template>
  <div>
    <p>{{ dataFromA }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataFromA: null
    }
  },
  mounted() {
    this.$root.$on('my-event', (data) => {
      this.dataFromA = data;
    });
  },
  destroyed() {
    this.$root.$off('my-event');
  }
}
</script>

这就是一个 Vue 2 的兄弟组件传递数据的例子。需要注意的是，在 Vue 2 中使用 $root 不太推荐，因为它会使代码变得难以维护。你可以使用 Vuex 或 Bus 来实现更好的数据共享和管理。