父传子

传递

1. 传递：在父组件中，给子组件使用 v-bind 绑定数据，但有的时候只需要传一个死数据可以不使用 v-bind。

2. 语法

   <List :list="list" />

接收

1. 在子组件中通 vc 身上的 props 配置项接收父组件传来的数据。

2. 语法

   props: ['list']

3. 详情请看 Vue props配置项

子传父 —— 子调父函数

逻辑

通过父传子的方式，由父亲创建一个函数并将这个函数传给子组件，子组件通过这个函数把数据传给父组件。

代码实现

1. 父组件

   <template>
   	<div>
   		<List :returnData="getListCompData" />
   	</div>
   </template>
   
   <script>
   	import List from './components/List'
   
   	export default {
   		name: 'App',
   		methods: {
   			getListCompData(e){
   				console.log(e);
   			}
   		},
   
   		components: { List }
   	};
   </script>

2. 子组件

   <template>
       <div>
           
       </div>
   </template>
   
   <script>
       export default {
           name: 'List',
           props: ['returnData'],
           mounted() {
               this.returnData({
                   name: '张三',
                   age: 21
               })
           },
       };
   </script>

子传父 —— 子发射函数

逻辑

1. 发射事件：子组件通过组件实例对象 vc 的 .emit() 发射一个函数，并传递数据。
2. 绑定事件：在父元素中给子元素绑定子元素发射的事件，从而拿到子元素发射的数据。

代码实现

1. 父元素

   <template>
   	<div>
   		<List @getListCompData="getListCompData" />
   	</div>
   </template>
   
   <script>
   	import List from './components/List'
   
   	export default {
   		name: 'App',
   		methods: {
   			getListCompData(e) {
   				console.log(e);
   			}
   		},
   
   		components: { List }
   	};
   </script>

2. 子组件

   <template>
       <div>
           
       </div>
   </template>
   
   <script>
       export default {
           name: 'List',
           mounted() {
               this.$emit('getListCompData', {
                   name: '李四',
                   age: 20
               });
           },
       };
   </script>

3. 运行结果

任意组件 —— 全局事件总线

博客链接：全局事件总线

任意组件 —— 消息订阅

博客链接：消息订阅