VUE中的父子组件通信

VUE项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。而在父组件中是不能直接调用子组件中的变量值的。下面详细说一下，父子组件之间怎么传值。

先说一下父组件引入子组件的方法。

1、路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系

{path: '/father',name: 'father',component: father,children: [{path: 'son',name: 'son',component: son}] }

2、组件传值-父组件向子组件传值
第一步：父组件在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用

父组件：father.vue

<template><div><h1>父组件</h1><router-view v-bind:fData="data1" :fMessage="data2"></router-view></div>
</template><script>
export default {data () {return {data1: '父组件数据data1',data2: '父组件数据data2',};}
}
</script>

第二步：把父组件传递过来的数据，在 props数组中定义一下

组件中的所有props 中的数据，都是通过父组件传递给子组件的

props 中的数据都是只读的，无法重新赋值

第三步：在该子组件中使用props数组中定义好的数据

子组件：son.vue

<template><div><h1>子组件</h1><p>下面是父组件传过来的数据</p><p>第一个数据：{{fData}}</p><p>第二个数据：{{fMessage}}</p></div>
</template><script>
export default {props: ['fData', 'fMessage'],data () {return {};}
}
</script>

3、组件传值-父组件把方法传递给子组件
第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件

<template><div><h1>父组件</h1><router-view @show="showFather"></router-view></div>
</template><script>
export default {data () {return {};},methods: {showFather (a, b) {console.log('触发了父组件的方法' + '======' + a + '======' + b);}}
}
</script>

第二步：在子组件中定义一个方法，在方法中，利用 $emit 触发父组件传递过来的，挂载在当前实例上的事件，还可以传递参数

第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了

子组件：son.vue

<template><div><h1>子组件</h1><Button type="primary" @click="sonClick">触发父组件方法</Button></div>
</template><script>
export default {data () {return {};},methods: {sonClick () {this.$emit('show', 111, 222);}}
}
</script>

4、组件传值-子组件通过事件调用向父组件传值
在子组件中，利用 $emit 触发父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件

父组件：father.vue

<template><div><h1>父组件</h1><router-view @show="showFather"></router-view></div>
</template><script>
export default {data () {return {fromSon1: '',fromSon2: ''};},methods: {showFather (a, b) {this.fromSon1 = a;this.fromSon2 = b;console.log('触发了父组件的方法' + '======' + a + '======' + b);}}
}
</script>

子组件：son.vue

<template><div><h1>子组件</h1><Button type="primary" @click="sonClick">触发父组件方法</Button></div>
</template><script>
export default {props: ['fData', 'fMessage'],data () {return {sonMessage: '子组件数据sonMessage',sonData: '子组件数据sonData'};},methods: {sonClick () {this.$emit('show', this.sonMessage, this.sonData);}}
}
</script>

5、父子组件之间相互传值
父组件：father.vue

<template><div><h1>父组件</h1><Button type="primary" @click="getData">获取数据</Button><router-view v-bind:fData="data1" :fMessage="data2" @show="showFather"></router-view></div>
</template><script>
export default {data () {return {data1: '父组件数据data1',data2: '父组件数据data2',fromSon1: '',fromSon2: ''};},methods: {showFather (a, b) {this.fromSon1 = a;this.fromSon2 = b;console.log('触发了父组件的方法' + '======' + a + '======' + b);},getData () {console.log(this.fromSon1);console.log(this.fromSon2);}}
}
</script>

子组件：son.vue

<template><div><h1>子组件</h1><p>下面是父组件传过来的数据</p><p>第一个数据：{{fData}}</p><p>第二个数据：{{fMessage}}</p><Button type="primary" @click="sonClick">触发父组件方法</Button></div>
</template><script>
export default {props: ['fData', 'fMessage'],data () {return {sonMessage: '子组件数据sonMessage',sonData: '子组件数据sonData'};},methods: {sonClick () {this.$emit('show', this.sonMessage, this.sonData);}}
}
</script>

VUE中的父子组件通信相关推荐

【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
Vue之非父子组件通信
Vue之非父子组件通信非父子组件传值方法: 1:在model中新建一个js文件引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建 ...
Vue 3.0父子组件通信
在Vue 3.0 发布以后,我们基于新的特性,来归纳一下父子组件通信的方式.并且检验一下Vue 2.0中常用的通信方式,如何在Vue 3.0中使用.本文列出了三种常用的通信方式: 子组件通过emit函 ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码父组件: 如图,HelloWorld是一个 ...
vue之非父子组件通信实现方式
在开发中,我们构建了组件树之后,除了父子组件之间的通信之外,还会有非父子组件之间的通信.这里主要讲两种方式: Provide/Inject Mitt全局事件总线 1.Provide和Inject 应用 ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
Vue中实现父子组件的数据的双向绑定（vue.sync的用法）
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的问题描述: 问题场景就是子组件传递数据给父 ...
vue中的父子组件传值详解
父组件与子组件传值 //父组件通过标签上面定义传值 <template> //使用子组件,在里面传输数据<main :obj="data"></mai ...

VUE中的父子组件通信

VUE中的父子组件通信相关推荐

最新文章

热门文章