Vue组件通信方式(父传子、子传父、兄弟通信)
作者:star@星空
这篇文章主要介绍了Vue组件通信方式(父传子、子传父、兄弟通信),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
父组件传到子组件
父组件是通过props属性给子组件通信的
数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告)
1. 父组件parent.vue代码如下:
<template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </template>
<script> import son from './Son' //引入子组件 export default { name: 'HelloWorld', data () { return { msg: '父组件', } }, components:{son}, } </script>
2. 子组件son代码如下:
<template> <div class="son"> <p>{{ sonMsg }}</p> <p>子组件接收到内容:{{ faMsg }}</p> </div> </template>
<script> export default { name: "son", data(){ return { sonMsg:'子组件', } }, props:['faMsg'],//接收psMsg值 } </script>
子组件通过props来接受数据
- 第一种方法
props: ['childCom']
- 第二种方法
props: { childCom: String //这里指定了字符串类型,如果类型不一致会警告的哦 }
- 第三种方法
props: { childCom: { type: String, default: 'sichaoyun' } }
子组件向父组件传值
通过绑定事件然后及$emit传值
vue2.0只允许单向数据传递,我们通过出发事件来改变组件的数据
1.父组件parent代码如下:
父组件通过绑定自定义事件,接受子组件传递过来的参数
<template> <div class="parent"> <h2>{{ msg }}</h2> <p>父组件接手到的内容:{{ username }}</p> <son psMsg="我是你爸爸" @transfer="getUser"></son> <!-- 监听子组件触发的transfer事件,然后调用getUser方法 --> </div> </template>
<script> import son from './Son' export default { name: 'HelloWorld', data () { return { msg: '父组件', username:'', } }, components:{son}, methods:{ getUser(msg){ this.username= msg } } } </script>
2.子组件son代码如下:
子组件通过$emit触发父组件上的自定义事件,发送参数
<template> <div class="son"> <p>{{ sonMsg }}</p> <p>子组件接收到内容:{{ psMsg }}</p> <!--<input type="text" v-model="user" @change="setUser">--> <button @click="setUser">传值</button> </div> </template>
<script> export default { name: "son", data(){ return { sonMsg:'子组件', user:'子传父的内容' } }, props:['psMsg'], methods:{ setUser:function(){ this.$emit('transfer',this.user)//触发transfer方法,this.user 为向父组件传递的数据 } } } </script>
非父子传参 (事件总线)
假设你有两个Vue组件需要通信: A 和 B ,A组件按钮上面绑定了点击事件,发送一则消息,B组件接收。
1. 初始化,全局创建$bus
直接在项目中的 main.js 初始化 $bus :
// main.js window.$bus=new Vue();
注意,这种方式初始化一个 全局的事件总线 。
2. 发送事件
$bus.$emit("aMsg", '来自A页面的消息');
<!-- A.vue --> <template> <button @click="sendMsg()">-</button> </template>
<script> //import $bus from "../bus.js"; export default { methods: { sendMsg() { $bus.$emit("aMsg", '来自A页面的消息'); } } }; </script>
接下来,我们需要在 B页面 中接收这则消息。
4. 接收事件
$bus.$on("事件名",callback)
<!-- IncrementCount.vue --> <template> <p>{{msg}}</p> </template>
<script> //import $bus from "../bus.js"; export default { data(){ return { msg: '' } }, mounted() { $bus.$on("aMsg", (msg) => { // A发送来的消息 this.msg = msg; }); } }; </script>
<<<<<<<<<<<<<<下方是拓展,面试不必说>>>>>>>>>>>
事件总线推荐下面写法:
集中式的事件中间件就是 Bus。我习惯将bus定义到全局:
app.js
var eventBus = { install(Vue,options) { Vue.prototype.$bus = vue } }; Vue.use(eventBus);
然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:
分发事件的组件
// ... methods: { todo: function () { this.$bus.$emit('todoSth', params); //params是传递的参数 //... } }
监听的组件
// ... created() { this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作 //todo something }) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy () { this.$bus.$off('todoSth'); }
如果需要监听多个组件,只需要更改 bus 的 eventName:
// ... created() { this.$bus.$on('firstTodo', this.firstTodo); this.$bus.$on('secondTodo', this.secondTodo); }, // 清除事件监听 beforeDestroy () { this.$bus.$off('firstTodo', this.firstTodo); this.$bus.$off('secondTodo', this.secondTodo); }
vue 跨页面双向通信
同源通信
1. localStorage
添加时间监听
window.addEventListener('storage', function (e) {});
改变 localStorage 值,触发 storage 事件
window.localStorage.setItem('params', JSON.stringify(object));
2. 通过跳转 url 传参
// 跳转路径带参数
3. 通过 BroadCast channel 广播实现通信
// 创建一个广播频道 const bc = new BroadcastChannel('kaixin');
// 其他页面可以通过onmessage来监听被广播的消息 bc.onmessage = function (res) { const data = res.data; };
// 发送消息时直接调用实例上的postMessage方法 bc.postMessage(data);
4. shareWorker
非同源通讯
1. iframe 嵌套
1、发送消息 window.postMessage(message, targetOrigin, [transfer]) // message 需要传的数据[object] // 目标窗口(URI), *代表没有限制任何窗口都能接收 // transfer 是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。 2、监听发来的消息 window.addEventListener("message", receiveMessage, false); // receiveMessage 处理函数[$event] function receiveMessage(event){ // 参数 event // event.data 就是你传的参数 // event.origin 发送者的目标url,做安全验证 // event.source 发送者的window对象 }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。