Vue组件之间传值的几种方式

1、prop传值（父传子）

  父组件
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>

  子组件
  <template>
	<div class="hello">
	   <h1>{{ msg }}</h1>
	</div>
  </template>
  
  <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
    };
  </script>

2、$emit（子传父 派发者模式）

子组件
<template>
  <div class="hello">
  	<!-- 派发者为子组件本身 -->
    <h1 @click="$emit('mua', foo)">{{ msg }}</h1>
    {{ foo }}
  </div>
</template>

父组件
<template>
  <div id="app">
  	<!-- 派发者模式，派发者也是监听者。 -->
    <HelloWorld @mua="mua($event)" msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  methods: {
    mua(data) {
      console.log(data, 'data');
    }
  },
}
</script>

3、$children传值（父传子）

父组件
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  mounted() {
    this.$children[0].foo = '111';
  },
}
</script>

子组件
<template>
  <div class="hello">
    {{ foo }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      foo: 'bar',
    };
  },
</script>

$children 获取当前实例的直接子组件 。需要注意 $children 并不保证顺序，也不是响应式的。
如果你发现自己正在尝试使用 $children 来进行数据绑定，
考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

注意1:注意当期实例是指这个文件下的实例。直接子组件是指这个文件下的直接子组件。
      如果子组件中还有子组件则孙子组件不能算直接子组件。

注意2:缺点：需要通过索引才能拿到自己想要的子组件，如果删除了某个子组件，会影响到子组件的结果，所以在实际的开发中比较少用
因此使用这个属性的时候一定要慎之又慎。

4、$parent（兄弟组件传值）

子组件
<template>
  <div class="hello">
    <h1 @click="$parent.$emit('mua')">{{ msg }}</h1>
  </div>
</template>

兄弟组件
<script>
export default {
  name: 'HelloWorld',
  mounted() {
    this.$parent.$on('mua', () => {
      console.log('mua');
    })
  },
}
</script>

5、provide、inject（父组件向孙组件传值）

父组件
<script>
export default {
  name: 'App',
  // provide可以是一个对象属性，但是为了避免污染全局，最好是使用函数的方式，抛出一个对象。
  provide() {
    return {
      feng: '1111'
    }
  },
}
</script>

孙组件
<template>
  <div class="hello">
    <h1>{{ feng }}</h1>
  </div>
</template>
  
<script>
export default {
  name: 'HelloWorldThree',
  // 如果希望provide传的值是一个动态的话，inject这里最好是使用computed属性来动态计算
  inject: ['feng'],
}
</script>

注意：provide、inject一般传的都是常量的值，因此，一般都作为组件开发时，使用的属性，平常业务开发的话，不是很适合用来祖孙之间
动态传递数据。

6、Bus传值（父子、祖孙、兄弟组件之间传值）

传值组件
<template>
  <div class="hello">
    <span @click="sendMsg">{{ foo }}</span>
  </div>
</template>

<script>
import Bus from '../Bus/index';

export default {
  name: 'HelloWorld',
  data() {
    return {
      foo: 'bar',
    };
  },
  methods: {
    sendMsg() {
      Bus.$emit('getMsg', this.foo);
    },
  },
}
</script>

监听组件
<script>
import Bus from './Bus/index';

export default {
  name: 'App',
  mounted() {
    Bus.$on('getMsg', (e) => {
      console.log(e, 'getMsg');
    })
  },
  beforeDestroy() {
    Bus.$off('getMsg');
  },
}
</script>

Bus函数的通讯方式，相当于封装了一个全局使用的Vue的实例，可以在其余组件内监听对应属性的变化，然后再进行其余的操作，但是要注意，
为了避免属性全局污染，在使用过后一定要记得bus.$off('监听的属性') 来关闭监听。

7、Vuex通讯（当前Vue实例生命周期内所有已激活组件内相互传值）
Vuex的状态管理是vue框架的一大特色，使用文档网上很多，不仅仅是只用来做组件之间的通讯的。可以看我其余的文档。里面对Vuex的属性、使用等，都有详细的说明：
或者可以参考文档 https://blog.csdn.net/qq_56989560/article/details/124706021 进行简单的配置使用