【Vue】组件间传值的三种方式:父传子,子传父,非父子传值
组件间传值的三种方式:父传子,子传父,非父子传值
·
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:
1,父组件传值给子组件
代码:
<template>
<div style="padding: 20px;">
<span>父组件</span><input type="text" v-model="textInfo" />
<ChildInfo :textInfo="textInfo"></ChildInfo>
</div>
</template>
<script>
import ChildInfo from '../../views/ChildInfo'
export default {
name: 'Home',
components: {ChildInfo},
data () {
return {
textInfo: ''
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
<span>我是子组件:{{textInfo}}</span>
</div>
</template>
<script>
export default {
name: 'ChildInfo',
props: {
textInfo: {
type: String,
required: true
}
}
}
</script>
<style scoped>
</style>
2,子组件传值给父组件
<template>
<div style="padding: 20px;">
<span>父组件</span><input type="text" v-model="textInfo" />
<ChildInfo v-on:funb="funb"></ChildInfo>
</div>
</template>
<script>
import ChildInfo from '../../views/ChildInfo'
export default {
name: 'Home',
components: {ChildInfo},
data () {
return {
textInfo: ''
}
},
methods: {
funb (a) {
this.textInfo = a
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
<span>我是子组件:{{textInfo}}</span><button @click="funa"> 发送数据</button>
</div>
</template>
<script>
export default {
name: 'ChildInfo',
data () {
return {
textInfo: '我是子组件的数据'
}
},
methods: {
funa () {
this.$emit('funb', this.textInfo)
}
}
}
</script>
<style scoped>
</style>
3,非父子组件传值
非父子组件之间传值,需要定义个公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。
bus文件可以理解为组件A和B的父组件,组件A注册一个事件上浮给bus文件,组件B在bus文件下监听事件
// bus.js
import Vue from 'vue'
export default new Vue()
<template>
<div>
A组件:
<span>{{elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
import Bus from './bus'
export default {
name: 'ChildInfo',
data () {
return {
elementValue: 10
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
B组件:
<span>{{elementValue}}</span>
</div>
</template>
<script>
import Bus from './bus'
export default {
name: 'ChildInfo2',
data () {
return {
elementValue: 0
}
},
mounted: function () {
var that = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
that.elementValue = data
})
},
methods: {
}
}
</script>
<style scoped>
</style>
延申阅读:
vue中非父子组件之间通信除了使用bus总线,也可以使用vuex,两者适用场景不同。
bus适合小项目、数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件。
vuex适用中大型项目、数据在多组件之间公用的情况。
发布订阅模式:
在软件架构中,发布订阅是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(称为订阅者)。而是将发布的消息分为不同的类别,无需了解哪些订阅者(如果有的话)可能存在。同样的,订阅者可以表达对一个或多个类别的兴趣,只接收感兴趣的消息,无需了解哪些发布者(如果有的话)存在。
参考文章:
Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值_lander_xiong的博客-CSDN博客_vue 父传子
更多推荐
已为社区贡献1条内容
所有评论(0)