vue中组件间实现通信的几种方式

通信方式1：props传递

适用于：（1）父组件===>子组件

子组件接收由父组件传递过来的值然后进行使用

下面组件是父组件传递数值 name,sex,以及:age给到 Student组件

<template>
  <div>
    <!-- 其中age前面加上:,是因为如果不加的话会直接是字符串，而不是数字了 -->
    <Student name="格雷福斯" sex="男" :age="33"></Student>
  </div>
</template>
<script>
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: {
    Student,
  },
};
</script>

在Student组件中，通过props进行值的接收

<template>
  <div class="demo">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <h2>学生年龄:{{ myAge + 1 }}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>
export default {
  name: "Student",
  data() {
    console.log(this);
    return {
      myAge: this.age,
    };
  },
  methods: {
    updateAge() {
      this.myAge++;
    },
  },
  props: ["name", "sex", "age"], //简单声明接收
</script>

当我们点击下面修改年龄的按钮的时候，我们会发现他每点击一次，数值就会+1 

props不仅适用于父组件===>子组件，同样，子组件也可以传数据给父组件

（2）子组件===>父组件（首要条件都是必须先要求父先给子一个函数用来接收回调）

需求：父组件中接收从子组件中传过来的值

父组件：App

<template>
  <div class="app">
    <h1>{{ msg }}，你是:{{ studentName }}</h1>
    <!-- 通过父组件传给子组件传递函数类型的props实现:子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />
  </div>
</template>

<script>
import School from "./components/School.vue";
export default {
  name: "App",
  components: {
    School
  },
  methods: {
    getSchoolName(name) {
      //从子组件中接收到传递过来的参数
      console.log("APP收到了学校名:", name);
    },
  },
};
</script>

子组件:School

<template>
  <div class="school">
    <h2>学校名称:{{ name }}</h2>
    <button @click="sendSchoolName">把学校名字给App</button>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "诺克萨斯",
    };
  },
  props: ["getSchoolName"],
  methods: {
    //发送学校名字给父组件
    sendSchoolName() {
      //调用从父组件中props过来的getSchoolName方法，将学校名称通过参数的形式传过去
      this.getSchoolName(this.name);
    },
  },
};
</script>

当我们点击子组件中的这个按钮的时候，父组件接收从子组件传递过来的数据，并显示在控制台上（其中有部分代码删除，只是为了还原出需要的内容）

---

通信方式2：组件的自定义事件

适用于：子组件===>父组件

适用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

父组件：App

在父组件中给Student子组件的vc上面绑定一个atlol事件，当这个atlol事件被触发的时候就会调用atlol这个函数

<template>
  <div class="app">
    <h1>{{ msg }}，你是:{{ studentName }}</h1>
  <!-- 通过父组件传给子组件绑定一个自定义事件实现:子给父传递数据（第一种写法,使用@或v-on） -->
  <!-- 下面两种写法是一样的，只是样子看起来不一样 -->
  <!-- <Student v-on:atlol="atlol" /> -->
    <Student @atlol="atlol"/> 
  </div>
</template>

<script>
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: {
    Student
  },
  data() {
    return {
      msg: "(O_o)??",
      studentName: ""
    };
  },
  methods: {
    //接收从子组件中传递过来的参数
    atlol(name, ...params) {
      console.log("atlol被调用了", name, params);
      this.studentName = name;
    }
  },
};

子组件：Student

<template>
  <div class="sutdent">
    <h2>学生姓名:{{ name }}</h2>
    <button @click="sendStudentName">把学生名字给App</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "戴安娜",
    };
  },
  methods: {
    //使用$emit触发事件，并将参数传递给父组件
    sendStudentName() {
      this.$emit("atlol", this.name, "在Student中", 888);
    }
  },
};
</script>

注意，我们还可以使用另外一种方式，接着往下看。。。而且下面的方法更加灵活！！！强烈推荐使用

子组件：Student，依旧没什么变化，添加了几个点击事件，可以解绑和销毁自定义事件

<template>
  <div class="sutdent">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <button @click="sendStudentName">把学生名字给App</button>
    <button @click="unbind">解绑atlol事件</button>
    <button @click="death">销毁当前Student组件的实例(vc)</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    console.log(this);
    return {
      name: "戴安娜",
      sex: "女",
      number: 0,
    };
  },
  methods: {
    sendStudentName() {
      //触发父组件中的事件
      this.$emit("atlol", this.name, "在Student中", 888);
      // this.$emit("demo");
    },
    unbind() {
      this.$off("atlol"); //解绑一个自定义事件
    },
    death() {
      this.$destroy(); //销毁了当前Student组件的实例,销毁后所有Student实例的自定义事件全都不奏效
    },
  },
};
</script>

重点在于父组件App

<template>
  <div class="app"
    <!-- 通过父组件传给子组件绑定一个自定义事件实现:子给父传递数据（第二种写法,使用ref） -->
    <Student ref="student" @click.native="show" />
    <hr />
  </div>
</template>

<script>

import Student from "./components/Student.vue";
export default {
  name: "App",
  components: {
    Student
  },
  data() {
    return {
      msg: "(O_o)??",
      studentName: ""
    };
  },
  methods: {
    atlol(name, ...params) {
      console.log("atlol被调用了", name, params);
      this.studentName = name;
    },
    show() {
      alert("@click.native原生点击事件！！！");
    }
  },
  mounted() {
    //通过$ref中的student组件然后$on结构到传来的 atlol  事件  ，调用当前组件中的atlol 函数
    this.$refs.student.$on("atlol", this.atlol); //绑定自定义事件
    // this.$refs.student.$once("atlol", this.atlol);//绑定自定义事件（只能点击一次）
  }
};
</script>

为什么上面这个方法很灵活呢？因为有的时候我们可以等组件mounted的时候我们可以设置等几秒点击子组件中的按钮才有效果，只有这个方法能写，而最前面的方法却不行。

当然，如果我们想让自定义事件只能触发一次，可以使用this.$refs.student.$once修饰符，如果你是用的上面那个 @atlol="atlol" 这个的话，只要加上.once  就行了

组件自定义事件总结：

触发自定义事件:   this.$emit('调用父组件中的函数',传递的值)

解绑自定义事件： this.$off('父组件中的事件')

注意！！！：通过 this.$refs.xxx.on('atlol',回调函数)，绑定自定义事件的时候，里面的回调函数要么配置在methods中，要么就使用 ()=>{}  箭头函数  ，否则  this  的指向会出现问题！！！

---

通信方式3：全局事件总线

适用：任意组件间通信！！！

要求：School组件传递值给Student组件

安装全局事件总线：

在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;//安装全局事件总线
    }

})

Student组件：发出事件

<template>
  <div class="sutdent">
    <h2>学生姓名:{{ name }}</h2>
    <button @click="sendStudentName">把学生名给School组件</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    console.log(this);
    return {
      name: "戴安娜",
    };
  },
  methods: {
    sendStudentName() {
      //发出hello事件，传递盖组件中的name
      this.$bus.$emit("hello", this.name);
    },
  },
};
</script>

School组件：接收事件

<template>
  <div class="school">
    <h2>接收从Student组件中传递过来的学生名:{{ this.studentName }}</h2>
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "诺克萨斯",
      address: "瓦罗兰大陆",
      studentName: ""
    };
  },
  mounted() {
    //接收hello事件
    this.$bus.$on("hello", data => {
      console.log("我是School组件，收到了数据", data);
      this.studentName = data;
    });
  },

  //最好在组件销毁前将这个事件解绑
  beforeDestroy() {
    this.$bus.$off("hello");
  }
};
</script>

---

通信方式4：消息订阅与发布(pubsub)

适用于：任意组件间通信

完成的效果是和全局事件总线一样的，我也就不截图了，这些代码都是可以直接复制在vue中然后使用的

一般情况下我们需要下一个插件

安装pubsub:   npm i pubsub-js

安装成功之后，我们不用想全局事件总线那样在main.js中添加那些代码（在全局自定义总线中的代码块里面，自己看），而是直接 import 

Student组件：发出事件

<template>
  <div class="sutdent">
    <h2>学生姓名:{{ name }}</h2>
    <button @click="sendStudentName">把学生名给School组件</button>
  </div>
</template>

<script>
//引用pubsub
import pubsub from "pubsub-js";
export default {
  name: "Student",
  data() {
    console.log(this);
    return {
      name: "戴安娜",
    };
  },
  mounted() {
    // console.log("Student:", this.$bus);
  },
  methods: {
    sendStudentName() {
      // this.$bus.$emit("hello", this.name);
      //看上面原来是$emit 的，现在通过引入 pubsub ，直接调用publish(翻译过来就是发布的意思)
      pubsub.publish("hello", this.name);
    },
  },
};
</script>

School组件：接收事件

<template>
  <div class="school">
    <h2>消息订阅与发布获取Student组件中的学生姓名:{{ studentName }}</h2>
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>

<script>
//引用pubsub
import pubsub from "pubsub-js";
export default {
  name: "School",
  data() {
    return {
      name: "诺克萨斯",
      address: "瓦罗兰大陆",
      studentName: ""
    };
  },
  methods: {
    demo(msgName, data) {
      console.log(有人发布了hello的消息，hello消息的回调执行了",msgName,data);
      this.studentName = data;
    }
  },
  mounted() {
    //直接调用methods中的函数来完成逻辑
    this.pubId = pubsub.subscribe("hello", this.demo);
    //下面的是自己用箭头函数写逻辑 ，  第一个参数是该事件的事件名，第二个是传递过来的值
    // this.pubId = pubsub.subscribe("hello", (msgName, data) => {
    //   console.log(this);
    //   console.log("有人发布了hello的消息，hello消息的回调执行了",msgName,data);
    // });
  },
  beforeDestroy() {
    // this.$bus.$off("hello");
    //用pubsub.unscribe去取消订阅，效果和上面用全局事件总线的$off效果是一模一样的
    pubsub.unsubscribe(this.pubId);
  }
};
</script>

---

通信方式5：插槽

适用：父组件===>子组件

分类：默认插槽、具名插槽、作用域插槽

使用方式：

   1.默认插槽

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

2.具名插槽

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

3.作用域插槽：

1.理解：数据在组件自身，单根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构有App组件决定）

2.具体编码

父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

---

通信方式6：Vuex

适用：任意组件间通信

在vue中实现集中数据（状态）管理的一个Vue插件，对vue应用中多个额组件的共享状态进行集中式的管理（读/写）

主要是实现多个组件需要共享数据

6.1搭建vuex环境

6.1.1创建文件： src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

6.1.2在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

6.2基本使用

6.2.1初始化数据、配置actions,mutations,操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})
const mutations = {
	JIA(state,value){
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

组价中如果要读取vuex中的数据的话： $store.state.sum

如果组件中要修改vuex中的数据:$store.dispatch('actions中想要调用的方法名',数据) 或者 $store.commit('mutations中的方法名',数据)

注意：如果没有网络请求或者其他业务逻辑，组件中也可以越过actions（就是不写dispatch），直接编写commit

---

以上就是总结的六种vue组件间通信的方式，里面有的细节后期会补充。。。