Vue组件通信：父子小搞作，谁主沉浮？

理解Vue组件通信

你知道吗？Vue.js里的组件就像是游戏的动力源泉，缺了他们的紧密协作，游戏就玩不转了。特别是父组件和子组件这两位小伙伴，就好像是在搞小动作，悄悄地交换信息，甚至可以直拨电话分享成果，让整个游戏体系变得活灵活现。这么一来，我们操控的界面就会顺畅很多！

通过props传递数据

你想把父组件的数据传到子组件？用Vue中的prop就行。只需要设置下 prop 就搞定！但是，如果让子组件也能用上父组件的功能，就要花点脑筋了。比如说，咱们在父组件里设好个方法，然后传递给子组件，这样子组件就能随便用这个方法了。

实现子组件调用父组件方法

我家那个娃儿，最近爱上做饭。于是我就让他尝试着动手做，我会在旁边指导他怎么用铲子开燃气炉。可是不能老是我教他咋整，得给他摸索的机会，去掌握点燃火源跟掌控火力大小。就跟编程里面的函数调用一样，娃要从父组件那边学习怎么调用”parentMethod”这类东东。接着把学会的知识转化为”prop”遗传给下一代组件，这样子，需要的子组件都能跟着学会。最后，子组件收到了这个“prop”，然后凭着个”$emit”魔法就能启动父组件里面的”parentMethod”咯~你看，这不就是小孩子学做饭时的那一套吗！

具体步骤示例

我在”父母”那个模块里加了个叫parentMethod的东东。

javascript
methods:{
  parentMethod(){
  

    
{{ message }}
    
  


import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello from Parent'
    }
  },
  methods: {
    parentMethod() {
      console.log('parentMethod called')
      // 在这里编写父组件的方法逻辑
      // ...
    }
  }
}

    //需要被子组件调用的方法逻辑

  }

}

用Parent模板里的Child部分别忘了加上parent Method！
“`html
  

    Call Parent Method
  


export default {
  props: ['childMethod'],
  methods: {
    callParentMethod() {
      this.childMethod()
    }
  }
}


别急，手机里的东西先加个标签，轻轻松松就能让爸爸看到了。
props:[‘childMethod’],
  callParentMethod(){
    this.$emit(‘call-parent’);
堆栈宝典上说，可以在孩子模板中，按键就能调用父亲函数吗？
调用父级方法</button>

只要照着下边做，你就能让你手头那个Vue组件更厉害，让上层的组件用起来也方便多！
注意事项
嘿儿，记住这点，Vue里那个prop就用来传递数据罢了。千万别想直接动大王（父组件）的地盘要靠event才能实现！还有，用编号N的方式来给变量命名，这样看着清爽些，以后查找起来也省力许多嘿嘿~
总结与展望
用Vue.js学着怎么用子组件叫爸爸组件提供点啥，真的好用又省事。这样团队合作就方便多了，代码也能写得更流畅！花时间看看这篇教你搞定Vue项目中父子关系的文章，肯定让你大吃一惊！
			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/javascript/2024/04/13188.html，转载请注明出处~~~