Vue组件间通信方法大全（适用父子，兄弟，子孙组件传值 六大类）-- 学习笔记

最近在掘金看了一篇
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
然后发现里面只是说了Vue中组件间传值有几种方式并没有相应的示例。不知道你们会不会和笔者一样，还是停留在之前的几种方式（props/ $emit，$emit/$on，vuex）[尴尬]，上面的文章提到了新的方式，笔者整理了一下并给出示例。

1、props（父组件传给子组件）

新建父组件father.vue

注意标记的地方，同时不要忘了引入子组件跟注册子组件哟

新建子组件child.vue

在子组件中使用props接收，就可以拿来使用了。
传递多个，在props添加就行了，使用数组的形式，比如[‘msg’,‘msgd’]这样的形式，当然也要在父组件加多一个:msgd=“msgd”;命名不一定重复，对应就行，个人建议一样好一点。也可以使用对象的形式接收。

props: {
    logo: String,
    own: String,
    name: String,
    state: String,
    remark: String,
  },

2、$emit（子组件传给父组件）

依旧在子组件中，跟上面的代码写在一起了，注意区分

$emit()：第一个参数是触发的方法，第二个参