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接收
[‘getSchoolName’],
调用父组件的方法：
methods:{sendAddrToApp() {// 父组件的方法this.getSchoolName(this.name)}}
子组件给父组件传递消息自定义事件的方式
1.在父组件定义：
或者：
在父组件的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
// 引入vueimport Vue from 'vue'// 引入appimport App from './App.vue'//关闭Vue的生产提示Vue.config.productionTip = false;//创VMnew 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)}}
左手的ㄟ右手
向右看齐
Dear 丶
迷南。
还没有评论，来说两句吧...