vue2的12种组件间通信方式，父传子，子传父，兄弟传值（超级硬核，宝藏）

玩之前创建一个 父组件 和 一个子组件 ，祝您玩的开心，整理了3多个小时，码字不易。

1、props传递数据

在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用props来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed

// Parent.vue 传送
<template>
 ?  <child :msg="msg"></child>
</template>
?
// Child.vue 接收
export default {
  // 写法一 用数组接收
  props:['msg'],
  // 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等
  props:{
 ? ?  msg:{
 ? ? ? ?  type:String,
 ? ? ? ?  default:'这是默认数据'
 ? ?  }
  },
  mounted(){
 ? ?  console.log(this.msg)
  },
}

2、v-model

和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据

// 父组件组件 这个是 v-model:obj="value"
<template>
  <div class="">
 ?  <HelloWorld v-model:obj="value"></HelloWorld>
 ?  {
  { value }}
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
 ?  return {
 ? ?  value: "我是Home里的数据 响应式的",
 ?  };
  },
  components: { HelloWorld },
};
</script>
?
 // 子组件
<template>
  <input :value="obj" @input="handlerChange" />
</template>
<script>
export default {
  props: ["obj"],
  // 可以修改事件名，默认为 input
  model: {
 ?  event: "updateValue",
  },
  methods: {
 ?  handlerChange(e) {
 ? ?  // 如果有上面的重命名就是这样
 ? ?  this.$emit("updateValue", e.target.value);
 ?  },
  },
};
</script>

第二种方式

// 最简单的 v-model实现 父组件 Home 
<template>
  <div class="">
 ?  <HelloWorld v-model="value"></HelloWorld>
 ?  {
  { value }}
  </div>
</template>
?
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
 ?  return {
 ? ?  value: "我是Home里的数据 响应式的",
 ?  };
  },
  components: { HelloWorld },
};
</script>
// 子组件 HelloWorld
<template>
  <input :value="value" @input="handlerChange" />
</template>
<script>
export default {
  props: ["value"],
  methods: {
 ?  handlerChange(e) {
 ? ? ? // 一定要是 input 事件
 ? ?  this.$emit("input", e.target.value);
 ?  },
  },
};
</script>

3、 .sync

可以帮我们实现父组件向子组件传递的数据 的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

// 父组件 Home
<template>
  <div class="">
 ?  <HelloWorld :val.sync="val"></HelloWorld>
 ?  {
  { val }}
  </div>
</template>
?
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
  data() {
 ?  return {
 ? ?  val: "我是Home里的数据 响应式的",
 ?  };
  },
  components: { HelloWorld },
};
</script>
?
// 子组件  HelloWorld
<template>
  <input class="i911-sync" :value="val" @input="handleInput" />
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
 ?  val: {
 ? ?  type: String,
 ? ?  default: "",
 ?  },
  },
  methods: {
 ?  handleInput(event) {
 ? ?  this.$emit("update:val", event.target.value);
 ?  },
  },
};
</script>

4.、ref

ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;

如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

// 父组件
<template>
  <div class="">
 ?  <HelloWorld ref=