H5W3
当前位置:H5W3 > HTML5 > 正文

vue: 组件之间传值

1、父子传参:

     父组件的数据、方法传递给子组件,子组件通过props接收,可以是数组、对象。

2、子传父(两种):

     this.$emit(”)可以触发一个自定义的事件

第一种方法:(推荐)

第一步: 在子组件中绑定一个函数

<p><button @click="changeParentName">改变父级的name</button></p>

第二步: 在子组件中定义函数,再函数中自定义一个事件

export default {
methods: {
changeParentName: function() {
this.$emit('changeParentName', 'xiaohong') // 触发一个自定义事件并传参xiaohong
}
}
}

第三步: 绑定在父组件中

<app-user-detail  @changeParentName="changeName"></app-user-detail>

第四步: 在父组件中写一个事件函数

export default {
data() {
return {
name: 'zhuli',
age: 10,
}
},
components: {
'app-user-detail': UserDetail,
'app-user-edit': UserEdit,
},
methods: {
changeName: function(name) {  // name形参是子组件中传入的值
this.name = name
},
}
}


第二种方法:

第一步: 先在父组件中写一个callback函数

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

第二步: 把callback函数传过去

<app-user-detail :callback="callback"></app-user-detail>

第三步: 在子组件中接收callback函数

props: {
callback: Function,
},

第四步: 点击父级button按钮的时候,执行callback函数

<p><button @click="callback('小红')">改变父级的name</button></p>

成功。推荐使用第一种

3、兄弟组件传参

第一种方法:

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

<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
},
}
}

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

第二种方式: 思想: 既然要借助父级,那么可不可不定义一个全局事件

第一步: 在入口文件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 = 20
EventBus.$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刚好指向父级
})
}
}

总结: 现在兄弟之间传值,都没有通过父组件

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9583

未经允许不得转载:H5W3 » vue: 组件之间传值

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址