组件通信大揭秘：props是糖果，$emit是传话筒

别小看组件间的信息传输，props和$emit都很实用！props就像你爸给你糖果，用来传递消息；而$emit就好比又把糖还给老爸。来看看我们如何操控它们，以及它们有啥不同之处。

一、props

咱们这儿叫它 props，就好比咱们跟孩子玩传声筒那个游戏一样。这样子，他们就懂得了关键信息️✌️❤️

1.1在父组件中定义props

想把数值传给小部件吗？so easy！就在它的标签上添上你要的数字即可。比如说message，要是你想让这个消息呈现给ChildComponent，只要把它设为ChildComponent的属性就欧克了！

1.2在子组件中接收props

  

    
    
  


import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}

你可以在小部件中用props接收到爸爸部件传来的信息！只需让子部件设置一个message prop，告诉它这是字符串类别的，就可以随时调用这些数据了。

二、$emit

emit这货儿就是个传话筒，能解决父组件跟子组件之间传递信息的大麻烦！子组件就能偷摸地把自己的数据发给父组件。

  

    
    
{{ message }}
  


export default {
  props: {
    message: String
  }
}

2.1在子组件中触发事件

哈喽！子组件里要触发自定义事件，直接敲个`this.$emit()`就能搞定。比如说，咱们想给亲爹的’tatus’自定义事件发送句”你好 Vue”消息，不就跟玩儿似的？

2.2在父组件中接收事件

简单讲要让父组件知道子组件在干啥，给它添加个v-on属性就搞定了！这么弄，子组件传递来的消息儿你也能收到了哦～

三、props和$emit的区别

  

    发送消息
  


export default {
  methods: {
    sendMessage() {
      // 通过$emit触发一个自定义事件，并向父组件传递数据
      this.$emit('message', 'Hello Vue!')
    }
  }
}

这俩货，虽然都能聊，但是其实有点儿小差别！

– props是用于父组件向子组件传递数据，是单向流动；

-$emit就是子给父传东西的方式，还是单行道；

  

    
    
  


import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    onMessage(data) {
      // 在事件处理函数中接收子组件传递过来的数据
      console.log('收到消息:', data)
    }
  }
}

-大佬把数据扔给小兵，然后小兵用$emit还给大佬。

– props就是把数据从老大传给小兵，让他们自己用。

就是向老大报告一下，他们悄悄处理。

总的来说，不管是Props还是$emit，最重要的就是要找准它们各自适合应用在哪儿。挑个满足你需求的就行了。记住实践中灵活运用

看这儿，给你几招在Vue里用Props跟$emit传信的秘诀，包您学得会，能熟练掌握Vue咯～。