Vue组件通讯

 

  Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)

1.父->子组件通讯

  父->子组件通讯,是通过props进行数据传递,并且具有这几个特性,单向传递,子组件接收的数据不可以更改,如果更改,会发出警告,每次父组件更新时,子组件的所有 prop 都会更新为最新值.

 1 父组件
2 <template lang="pug">
3 .father
4 Children(:name='msg')
5 </template>
6 <script>
7
8 import Children from './Children'
9 export default {
10 name: 'father',
11 data () {
12 return {
13 msg: '我是father的数据'
14 }
15 }
16 }
17 </script>
1 子组件
2 <template lang="pug">
3 .children
4 .box {{name}}
5 </template>
6
7 <script>
8 export default {
9 name: 'father',
10 // props: ['name'], 1.props的第一种写法
11 // props: {      2.props的第二种写法
12 // name: Array
13 // },
14 props: {        3.props的第三中写法(推荐)
15 name: {
16 type: String
17 }
18 },
19 data () {
20 return {
21 msg: '我是children的数据'
22 }
23 }
24 }
25 </script>
 1 2.子->父组件通讯
2
3   一般子->父组件通讯是通过Events事件进行值得传递
4
5 父组件
6 <template lang="pug">
7 .father
8 Children(@hand='hand') //自定义事件1 </template>
9
10 <script>
11 import Children from './Children'
12 export default {
13 name: 'father',
14 data () {
15 return {
16 msg: '我是father的数据'
17 }
18 },
19 components: {
20 Children
21 },
22 methods: {
23 hand (msg) {
24 alert(msg)  //拿到子组件传递的值
25 }
26 }
27 }
28 </script>
 1 子组件
2 <template lang="pug">
3 .children
4 input(type='button' value='clickMe' @click='handle')
5 </template>
6
7 <script>
8 export default {
9 name: 'children',
10 data () {
11 return {
12 msg: '我是children的数据'
13 }
14 },
15 methods: {
16 handle () {
17 this.$emit('hand', this.msg) //发送事件名+传递的值
18 }
19 }
20 </script>

3.兄弟组件通讯

  由上可知,父子组件通讯都会有一个媒介,相当于一个传递信息的介质,才可以使得数据传递过去。兄弟组件通讯业需要一个介质,我们通常称之为事件线~

1.创建一个组件  名字:eventBus(随便起) 我放在了src/asstest/eventBus/index.js文件夹下

1 import Vue from 'vue'
2 export default new Vue()

2.创建第一个兄弟组件,名字:Emit

 1 <template lang="pug">
2 .emit
3 .box Emit组件a
4 button(@click='show') 向on组件传值
5 </template>
6
7 <script>
8 import bus from '../assets/eventBus'
9 export default {
10 methods: {
11 show () {
12 bus.$emit('user', 'haha')
13 }
14 }
15 }
16 </script>

3.创建第二个兄弟组件,名字:On

 1 <template lang="pug">
2 .on
3 .cont 接受emit组件的数据:{{msg}}
4 </template>
5
6 <script>
7 import bus from '../assets/eventBus'
8 export default {
9 data () {
10 return {
11 msg: 'on'
12 }
13 },
14 mounted () {
15 let self = this
16 bus.$on('user', (msg) => {
17 self.msg = msg
18 })
19 }
20 }
21 </script>

  在vue中常用的传值方式也就是这三种,但方放不局限于这三种。

Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)的更多相关文章

  1. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  2. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

  3. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  4. vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数

    Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...

  5. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  6. vue父组件异步获取动态数据传递给子组件获取不到值

    原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...

  7. VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  8. 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

    在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...

  9. Vue父组件传递异步获取的数据给子组件

    问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...

随机推荐

  1. Jmeter---不同线程组的使用介绍(转)

    在添加线程组:发现线程组种类挺多的  翻查资料后对几个工具进行总结: 原本想写三个 在翻阅资料,后发现下面博文比较详情, 本文大部分来自: https://blog.csdn.net/sinat_32 ...

  2. 2019JS必看面试题

    2019JS必看面试题:https://www.jianshu.com/p/f1f39d5b2a2e 1. javascript的typeof返回哪些数据类型. 答案:string,boolean,n ...

  3. JAVA基础--JAVA 集合框架(泛型、file类)

    一.集合总结 集合:Collection体系.Map体系. Collection体系:单列集合的共性操作规则. List:列表,可以重复,有下标,拥有特有的迭代器ListIterator. Array ...

  4. Luogu P5470 [NOI2019]序列

    题目 可以直接贪心,但是用模拟费用流推的话会更轻松. 首先有一个显然的建图方式: \(S\)到\(0\)流量为\(k\),费用为\(0\). \(0\)到\(a_i\)流量为\(1\),费用为\(-a ...

  5. 洛谷 P5662 纪念品 & [NOIP2019普及组] (dp,完全背包)

    传送门 解题思路 本题首先要明白,在每一天时,最优策略是先进行操作2(卖),再进行操作1(买),才能是利益最大化. 本题很显然当只有两天时,是一个完全背包,就是把当日价钱当做体积,把明日价格和今日价格 ...

  6. JetBrains插件

    1,翻译插件 TranslationPlugin 打开翻译对话框 : Ctrl + Shift + O(英文字母o) 鼠标取词并翻译 : Ctrl + Shift + Y http://yiiguxi ...

  7. HDU - 1845 Jimmy’s Assignment (二分匹配)

    Description Jimmy is studying Advanced Graph Algorithms at his university. His most recent assignmen ...

  8. sublime3故障收集emmet无法安装pyv8

    本文主要介绍Sublime Text如何开启debug模式,分析使用过程中一些常见错误情形的解决方法.情形一:Package Control:There are no packages availab ...

  9. Docker:删除images报错(Error response from daemon: conflict: unable to delete 6885a5e3712a (must be forced) - image is being used by stopped container 0cf27d7d29c7)

    1.进入root权限 sudo su 2.停止所有的container,这样才能够删除其中的images: docker stop $(docker ps -a -q) 如果想要删除所有contain ...

  10. luogu P1232 [NOI2013]树的计数

    传送门 这题妙蛙 首先考虑构造出一个合法的树.先重新编号,把bfs序整成\(1,2,3...n\),然后bfs序就是按照从上到下从左往右的遍历顺序,所以可以考虑对bfs序分层,可以知道分层方式只会对应 ...