举例:
有一个父组件: App.vue
两个子组件:Left.vue、Right.vue,这两者之间是兄弟组件
父组件向子组件传值:自定义属性(:属性名、props)
① 数据传递:
父组件中使用子组件时,直接绑定属性,将要传递的值通过该属性传递给子组件
<子组件名 :属性名="属性值"/>
② 数据接收:
子组件接收父组件传递过来的值,使用:props
export default {
// 、、、
props: ['属性名']
// 、、、
}
③ 数据使用:
子组件接收到父组件传递过来的值后,直接通过props里面的属性名,使用该属性
注意:props里面接收的属性名要和 父组件使用子组件时写的传递的属性名一致
示例
eg:
父组件 App.vue - - -
<template>
<div>
<h1>App根组件(父组件)</h1>
<div class="content">
<Left :messsage="message1"/>
</div>
</div>
</template>
<script>
import Left from './Left.vue'
export default {
name: 'App',
components: {
Left
},
data() {
return {
message1: '你好呀!'
}
}
}
</script>
<style lang="less">
.content {
display: flex;
}
</style>
子组件 Left.vue - - -
<template>
<div class="leftContent">
<h1>Left</h1>
<p>{{ messsage }}</p>
</div>
</template>
<script>
export default {
name: 'Left',
props: ['messsage']
}
</script>
<style lang="less" scoped>
.leftContent {
width: 300px;
background-color: #eee;
}
</style>
页面效果:
子组件向父组件传值:自定义事件(@自定义事件名、$emit)
① 数据传递:
子组件中使用 $emit 将数据传递给父组件
this.$emit('自定义事件名', '要传递的数据')
② 数据接收:
父组件使用子组件时,绑定自定义事件,接收子组件传递过来的数据
<子组件名 @自定义事件名="方法名"/>
methods: {
方法名(val) {
// val 是子组件传递过来的数据
// 、、、
}
}
③ 数据使用:
数据转存- - -父组件中定义一个变量,将子组件传递过来的数据 转存 到 该变量,然后使用该变量
示例
eg:
子组件 Right.vue - - -
<template>
<div class="rightContent">
<h1>Right</h1>
<p>count- - - {{ count }}</p>
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
name: 'Right',
data() {
return {
count: 0
}
},
methods: {
add() {
this.count += 1
// 子向父传递数据
this.$emit('countChange', this.count)
}
}
}
</script>
<style lang="less" scoped>
.rightContent {
width: 300px;
background: palevioletred;
}
</style>
父组件 App.vue - - -
<template>
<div>
<!-- ③使用转存后的数据 -->
<h1>App根组件(父组件)- - -{{ countFromSon }}</h1>
<div class="content">
<Left :messsage="message1"/>
<!-- ①父接收子传递来的数据 -->
<Right @countChange="getCount"/>
</div>
</div>
</template>
<script>
import Left from './Left.vue'
import Right from './Right.vue'
export default {
name: 'App',
components: {
Left,
Right
},
data() {
return {
message1: '你好呀!',
countFromSon: 0
}
},
methods: {
// ①父接收子传递来的数据 val
getCount(val) {
// ②转存子转递给父的数据
this.countFromSon = val
}
}
}
</script>
<style lang="less">
.content {
display: flex;
}
</style>
页面效果:
兄弟组件之间传值:EventBus(eventBus.js、 e m i t 、 emit、 emit、on)
兄弟组件 Left.vue Right.vue 之间传递数据,例如 Left.vue 向 Right.vue 传递数据
1. 先创建一个 eventBus.js 文件,导出一个 Vue实例,内容如下:
import Vue from 'vue'
export default new Vue()
2. 数据传递:
① 传递数据的组件中,导入 eventBus.js
import bus from './eventBus.js'
② 使用 $emit 传递数据
bus.$emit('自定义事件名', 传递的数据)
3. 数据接收:
① 传递数据的组件中,导入 eventBus.js
import bus from './eventBus.js'
② 使用 $on 接收数据
bus.$on('自定义事件名', val => {
// ③ 数据转存 、、、
})
4. 数据使用:
数据转存- - -父组件中定义一个变量,将子组件传递过来的数据 转存 到 该变量,然后使用该变量
示例
eg:
传递数据的兄弟组件 Left.vue - - -
<template>
<div class="leftContent">
<h1>Left</h1>
<p>{{ messsage }}</p>
<h2>{{ poem }}</h2>
<button @click="sendPoem">发送诗句</button>
</div>
</template>
<script>
// ① 导入 eventBus.js
import bus from './eventBus.js'
export default {
name: 'Left',
props: ['messsage'],
data() {
return {
poem: '离离原上草,一岁一枯荣。野火烧不尽,春风吹又生。'
}
},
methods: {
sendPoem() {
// ② 传递数据 bus.$emit
bus.$emit('share', this.poem)
}
}
}
</script>
<style lang="less" scoped>
.leftContent {
width: 300px;
background-color: #eee;
}
</style>
接收数据的兄弟组件 Right.vue - - -
<template>
<div class="rightContent">
<h1>Right</h1>
<p>count- - - {{ count }}</p>
<button @click="add">+1</button>
<!-- ④ 使用数据 -->
<h3>{{ poemFromLeft }}</h3>
</div>
</template>
<script>
// ① 导入 eventBus.js
import bus from './eventBus.js'
export default {
name: 'Right',
data() {
return {
count: 0,
// ③ 转存数据
poemFromLeft: ''
}
},
methods: {
add() {
this.count += 1
this.$emit('countChange', this.count)
}
},
created() {
// ② 接收数据 bus.$on、val
bus.$on('share', val => {
// ③ 转存数据
this.poemFromLeft = val
})
}
}
</script>
<style lang="less" scoped>
.rightContent {
width: 300px;
background: palevioletred;
}
</style>
页面效果: