Vue组件间的通信

下面的总结都将按照这个模型图去设计

父传子的方式 ：（Props）

App组件：

<template>
  <div>
      <Student name="carry" :age=26 sex="男"/>
  </div>
</template>

<script>
import Student from './components/Student';
export default {
  name:'App',
  components: {Student},
}
</script>
<style lang='scss' scoped>
</style>

Student组件

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ myAge + 1 }}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是NewEgg",
      myAge: this.age,
    };
  },
  // 简单的声明接收
  //props:['name','age','sex'],

  //接收的同时，对数据类型进行限制
  //   props:{
  //       name:String,
  //       age: Number,
  //       sex: String
  //   },
  //接收的同时，对数据类型限制+默认值的指定+必要性的限制
  props: {
    name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    age: {
      type: Number,
      default: 99, //默认值
    },
    sex: {
      type: String,
      required: true,
    },
  },

  components: {},

  computed: {},

  methods: {
    updateAge() {
      this.myAge++;
    },
  },
};
</script>
<style lang='scss' scoped>
</style>

总结：

父组件传给子组件的值，子组件利用Props去接收(几种情况可以看代码)

子组件给父组件传值Props方式

1.在父组件的定义：

 <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName ="getSchoolName"/>

声明getSchoolName方法，接收子组件传递的数据

methods:{
      getSchoolName(data) {
        console.log('我是App组件，我收到了我儿子School的数据',data)
      }
   }

2.在子组件

声明props接收:props:['getSchoolName'],

调用父组件的方法：

methods:{
			sendAddrToApp() {
                 // 父组件的方法
				this.getSchoolName(this.name)
			}
		}

子组件给父组件传递消息自定义事件的方式

1.在父组件定义：

<Student @sendNameToApp="sendNameToApp"/>

或者：<Student v-on:sendNameToApp="sendNameToApp"/>

在父组件的methods里面声明收到子组件传递的信息的方法

 methods:{
    sendNameToApp(name) {
				console.log('我是App组件，我收到了我儿子Student的数据',name)
			}
  }

2.在哪绑定事件就在哪去触发事件：

在子组件里面使用$emit去绑定事件

methods:{
			sendStudentNameToApp() {
				this.$emit('sendNameToApp', this.name)
			}
		},

兄弟组件传递消息总线方式

School组件代码

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="sendAddrToStu">把学校的地址给学生</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'南阳理工',
				address:'南阳',
			}
		},
		mounted() {
			this.$bus.$on('hello', (data) => {
				console.log('我是school组件,w我收到了Student数据', data)
			})
		},
		methods:{
			sendAddrToStu() {
				this.$bus.$emit('addr', this.address)
			}
		}
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

Student组件代码

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
				number:0
			}
		},
		methods:{
			sendStudentName() {
				this.$bus.$emit('hello', this.name);
			}
		},
		mounted() {
			this.$bus.$on('addr',(data) => {
				console.log('我是stu组件，我收到了我兄弟组件传来的数据:',data)
			})
		}
	}
</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

App

<!--  -->
<template>
  <div>
    <h1>{{ msg }}，学生姓名是:{{ studentName }}</h1>
    <School/>
		<Student/>
  </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";
export default {
  name: "App",
  components: { Student, School },
  data() {
    return {
      msg: "你好啊！",
      studentName: "",
    };
  },
};
</script>
<style scoped>
</style>

main.js

// 引入vue
import Vue from 'vue'
// 引入app
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false;
//创VM
new Vue({
    el:"#app",
    render: h=>h(App),
    beforeCreate() {
        Vue.prototype.$bus= this  // 安装全局事件总线
    }
})

利用消息订阅与发布实现任意组件的消息传递

1.引入第三方库： npm i pubsub-js

2.订阅消息一方：

import pubsub from 'pubsub-js'

mounted() {
			
			this.pubId = pubsub.subscribe('hello',(a,b) => {
				console.log('有人发布了hello消息，hello消息的回调执行啦',a,b)
			})


//取消订阅
beforeDestroy() {
			//取消订阅
			pubsub.unsubscribe(this.pubId)
		}

3.发布消息的一方

import pubsub from 'pubsub-js'


methods:{
			sendAddrToAppBySub() {
				pubsub.publish('hello', 666)
			} 
		}