1父传子

1.1父组件

1.2子组件：在 props 中添加了元素之后，就不需要在 data 中再添加变量了

2子传父

2.1子组件

2.2父组件

兄弟组件传值一：使用全局函数全局事件

第一步: 在入口文件main.js里暴露一个vue实例

export const EventBus = new Vue() // 暴露一个vue实例

第二步: 在要传值的文件里导入vue实例模块，age使用自己的变量，再定义一个全局触发事件函数，触发事件函数绑定在一个button上

<template><div><h3>用户编辑页面</h3><p>编辑用户</p><p>年龄: {{ age }}</p><p><button @click="changeAge">编辑年龄</button></p></div>
</template>
<script>
import { EventBus } from "../main.js"
// 导入模块
export default {// props: ["age"],data() {return {age: 10,}},methods: {changeAge: function() {this.age = 20EventBus.$emit("editAge", this.age)// 触发全局事件 并且把改变后的值传入事件函数// console.log(EventBus)}}
}
</script>

第三步: 在要被传入值得组件中也导入vue实例模块，也不使用父组件中传过来个age,自己重新定义，创建一个初始化的钩子函数，再使用created钩子函数中使用传值组件的全局定义事件。

import { EventBus } from "../main.js"
export default {data() {return {name : this.myName,age: 10}},methods: {changeParentName: function() {this.$emit('changeParentName', 'xiaohong')// this.$emit('')触发自定义事件},created() {EventBus.$on('editAge', (age) => { // 使用$on去绑定事件this.age = age // 使用es6写法,this刚好指向父级})}
}

兄弟组件传值二：使用全局函数全局事件

第一步: 在父组件中给要传值的兄弟两个都绑定要传的变量。

<app-user-detail :age="age"></app-user-detail>
<app-user-edit :age="age" @editAge="changeAge"></app-user-edit>

第二步: 在要传值得组件中接受变量和绑定触发事件

<template><div><h3>用户编辑页面</h3><p>编辑用户</p><p>年龄: {{ age }}</p><p><button @click="changeAge">编辑年龄</button></p></div>
</template>
<script>
export default {props: ["age"],methods: {changeAge: function() {this.$emit('editAge', 20)   // 触发自定义事件并传值}}
}
</script>

第三步: 在父组件中绑定要传组件中的自定义事件

export default {data() {return {name: 'zhuli',age: 10,}},components: {'app-user-detail': UserDetail,'app-user-edit': UserEdit,},methods: {changeAge: function(age) {this.age = age},}
}

总结: 当要传值的组件改变了父组件的变量，父组件又可以把改变的值传值所绑定变量的组件，实现兄弟间传值。

Vue组件之间相互传值的方式相关推荐

使用vuex对兄弟组件传值_vue组件之间相互传值的方式
我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
vue组件之间互相传值：父传子，子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
vue组件之间的传值（兄弟间的传值）
概要:vue组件之间的传值大致有三种:父传子,子传父,还有兄弟之间,今天我们主要来讲兄弟之间的传值.废话不多说,我们直奔主题 vue 组件兄弟间的传值是要通过一个事件总线来实现(可以把事件总线理解为一 ...
Vue组件之间的传参方式小总结
学习vue的组件,可能很多人已经了解了组件的创建注册使用,但是随之而来的就是组件之间的通信,父子组件怎么传? 兄弟组件怎么传? 不是父子组件又怎么传? 接下来介绍几种组件之间的传参方式,也是很容易面试 ...
vue组件间相互传值
一般vue的组件之间的传值分为:父组件传子组件,子组件传父组件,任意组件之间传值. 1.父组件传子组件:(父组件通过v-bind(可以缩写为 :)发送,子组件通过props接收) //父组件中引入子组 ...
【Vue知识点】 vue组件之间如何传值
1.父组件传值子组件父组件:<Header :msg='msg'/> 子组件: props:['msg'] props:{ msg:数 ...
vue组件之间的传值的几种方法
vue组件之间传值的几种方法总结一.父传子父传子技术就是把父组件中的数据传给子元素调用,用到的方法是 1.在父组件的子组件标签上绑定一个属性,挂载要传输的变量 ,语法是 :属性名 (冒号加属性名) ...
Vue组件之间数据通信12种方式
目录 1.父组件向子组件传递数据 props 2.子组件向父组件传递数据($emit的用法) 3.兄弟组件通信 4.ref / $refs 5.eventBus事件总线($emit / $on) 6. ...

Vue组件之间相互传值的方式