vue 实现组件间通信

小组招新

今天是小组招新的第一周。自从国庆假期结束后，招新活动就开始了，本来还以为会很轻松的，但没想到挺费学长学姐的。从在暑假期间制作PPT，招新视频以及小组招新海报到现在正式开始招新，学弟学妹们开始投放简历，到训练自己的临场发挥和随机应变，发现自己在小组的时光中有了很大的进步（不只在个人的学习上，还锻炼了自己与他人交流以及为人处世的方法和技巧）

未来软件的风水养人，绝不会让你日渐消瘦。

Vue实现组件间通信

最近在学习有关vue相关的知识，在看过老师的视频后的一些小总结

不同组件之间的通信

父子之间，兄弟之间，祖孙之间

// 使用props实现父子、兄弟、祖孙之间的通信


//父组件通过props将数据或者方法传递给子组件
父组件
<template>
  <div>
    <ChildOne :message="msg" @sendmsg="handleSendMsg"></ChildOne>
    <ChildTwo :clickBtn="clickBtn"></ChildTwo>
  </div>
</template>
<script>
import Child1 from './ChildOne.vue'
import Child2 from './ChildTwo.vue'
export default {
  data () {
    return {
      msg: 'hello',
    }
  },
  components: { ChildOne, ChildTwo },
  methods: {
    clickBtn() {
      alert("点击了组件2的按钮")
    }
  }
}
</script>

子组件1

<template>
  <div>
<p>{{ message }}</p>
 <button @click="clickBtn">点击我</button>
</div>

</template>
<script>
export default {
  props: {
    message: String,
'handelClick'
  },
methods:{
clickBtn(){
    this.handelClick();
}
}
</script>


//兄弟组件间的通信
使用props无法直接进行兄弟组件之间的通信，但可以利用同一个父组件作为中介进行通信

也就是通过组件1向父组件传递数据或方法，再由父组件向组件2之间进行传递数据或方法
<template>
  <div @click="send">{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  },
  methods: {
    send () {
      this.$emit('sendmsg', this.message)
    }
  }
}
</script>

使用$ref进行组件间通信

<template>
  <div>
    <ChildVue ref="child" />
    <button @click="getChildData">Get Child Data</button>
  </div>
</template>

<script>
import ChildVue from './ChildVue';
export default {
  components: {
    ChildVue,
  },
  methods: {
    getChildData() {
      const childData = this.$refs.child.getData();
      console.log(`Child data: ${childData}`);
    },
  },
};
</script>
// 在使用 $refs 进行组件间信息传递的时候，父组件和子组件之间存在依赖关系。

总结

1. Props和自定义事件：
- 父组件通过props将数据传递给子组件。
- 子组件通过$emit触发自定义事件，并将数据传递给父组件。
这种方式适用于父子组件之间的通信。

2. $refs：
- 父组件可以使用ref来引用子组件，并通过$refs访问子组件的方法和数据。

这种方式适用于父组件主动调用子组件的方法或访问子组件的数据。

对于简单的组件通信，props和自定义事件是常用的方式；

vue 实现组件间通信

小组招新

不同组件之间的通信

总结

悦读