Vue组件通信方式(一)
组件与组件的关系,通常有父子关系,兄弟关系以及隔代关系。
针对不同的场景,如何选用适合的通信方式呢?
(一) props/$emit
parentComponent ==> childComponent
child 通过 props [childParams] 接受父组件 parent 传递的过来的参数A;
parent 通过 v-bind:childParams = parentParams 这种方式传递给 child。
childComponent ==> parentComponent
child 使用 this.$emit(eventChild,参数) 触发事件;
parent 通过 v-on:eventChild = methodParent 监听事件,获取参数。
代码如下:
parentComponent:
<template>
<div>
<child v-bind:childAnimals="parentAnimals" v-on:titleChanged="updateChange"></child>
<h2 v-text="title"></h2>
</div>
</template>
<script>
import Child from './child'
export default {
data() {
return {
title:'未改变时候的值',
parentAnimals: ['dog','cat','pink']
}
},
components: {
'child':Child
},
methods: {
updateChange(e) {
const { name } = e;
this.title = name;
}
}
}
</script>
childComponent
<template>
<div>
<!--父组件传递过来的参数-->
<ul>
<li v-for="animal in childAnimals" v-bind:key="animal" v-text="animal"></li>
</ul> <!--向父组件传递参数-->
<button @click="changeParentTitle">改变父组件title</button>
</div>
</template>
<script>
export default {
data() {
return { }
},
// props:{
// animals:{
// type:Array,
// required:true
// }
// }
props:['childAnimals'],
methods: {
changeParentTitle() {
this.$emit('titleChanged',{
name: '子组件改变了父亲的title'
});
}
}
}
</script>
(二) $emit / $on
通过一个全新 Vue 实例,作为中央事件处理中心,触发事件,监听事件。
使用方法:
触发事件: eventInstance.$emit(事件名A, params)
监听事件: eventInstance.$on(事件名A,(params)=> { } )
eventService.js
import Vue from 'vue';
export let eventInstance = new Vue();
child.vue
<template>
<div>
<button @click="send">child发送消息</button>
</div>
</template>
<script>
import { eventInstance } from '../commonEvent/eventService';
export default {
data() {
return {}
},
methods: {
send() {
eventInstance.$emit('msg-child',`this from child ${new Date().toLocaleString()}`);
}
}
}
</script>
dog.vue 组件接受 child.vue 发送过来的信息
<script>
import { eventInstance } from '../commonEvent/eventService';
export default {
data() {
return {}
},
components: { },
mounted() {
eventInstance.$on('msg-child',(res)=>{
console.log(res);
});
}
}
</script>
Vue组件通信方式(一)的更多相关文章
- 整理4种Vue组件通信方式
整理4种Vue组件通信方式 重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信 非父子组件的eventBus通信 ...
- Vue组件通信方式全面详解
vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...
- 最全的Vue组件通信方式总结
1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...
- Vue组件通信方式(8种)
1.一图认清组件关系名词 父子关系:A与B.A与C.B与D.C与E 兄弟关系:B与C 隔代关系:A与D.A与E 非直系亲属:D与E 总结为三大类: 父子组件之间通信 兄弟组件之间通信 跨级通信 2.8 ...
- vue组件通信方式总结
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给 ...
- vue组件通信方式(多种方案)
一.Props传递数据 components |-Grandson1.vue //孙子1 |-Grandson2.vue //孙子2 |-Parent.vue //父亲 |-Grandson1.vue ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- Vue组件间通信方式
一.Props传递数据 在父组件中使用子组件,本质通过v-bind绑定属性传入子组件,子组件通过props接收父组件传入的属性 <template> <div> 父组件:{{m ...
- vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
随机推荐
- 【UOJ#349】[WC2018] 即时战略
题目链接 题意 一开始已知一号点. 每次可以选定一个已知点和一个未知点,然后交互库会返回从已知点出发到达未知点路径上的第二个点. 要求在有限步之内知道每一个点. 次数要求: 链的情况要求 \(O(n) ...
- layui 表格设置td的宽度
layui 表格设置td的宽度, td{ min-width: 150px; max-width: 200px; } 超出长度隐藏 overflow: hidden; text-overflow: e ...
- MySql的导入导出
可以参看之前的博客:https://www.cnblogs.com/shijinglu2018/p/8672699.html 可以参看视频:https://i.cnblogs.com/EditPost ...
- 关于Vuex的actions传入多个参数的方法:
1.在state中: state={ obj:{ name:'state中的数据' } } 2.在actions定义的方法中: ...
- C#与java的区别(继承,接口实现,指针,编译后形式,异常处理几个方面比较区别)
- 浙大PAT CCCC L3-015 球队“食物链” ( 搜索 && 剪枝 )
题目链接 题意 : 有 n 个球队,给出主客场胜负图,找出一个序列 1.2.3..... 使得 1 战胜过 2 .2 战胜过 3.3 战胜过 4..... n 战胜过 1 ( 这个序列是 1~n 的其 ...
- C. Anna, Svyatoslav and Maps
C. Anna, Svyatoslav and Maps 给定一个有向图,给定一条有向路径,求一条顶点最少的路径,使得给定的路径是它的最短路 folyd预处理出任意两点间的最短路,然后判断是否可以缩点 ...
- div中图片居中
直接上图
- AMD - Learning JavaScript Design Patterns [Book] - O'Reilly
AMD - Learning JavaScript Design Patterns [Book] - O'Reilly The overall goal for the Asynchronous Mo ...
- bash中前后移动一个单词和删除单词的快捷键
bash中一个很重要的快捷键,就是向后删除一个单词: ctrl+w=ctrl+W 一个字符一个字符的移动是: ctrl+f, ctrl+b 但是, 一个单词一个单词的移动是: (但是, 这个用得比较少 ...