1. 父传子
首先我们在component里创建一个子组件,然后用props声明他的属性title,其次在我们的父组件中注册子组件并为属性赋值,最后就可以在子组件中使用这个属性了。
// 子组件 ChildComponent.vue
<template>
<div>
<h2>{
{ title }}</h2>
</div>
</template>
<script>
export default {
props: ['title']
}
</script>
<style lang="scss" scoped>
</style>
// 父组件 App.vue
<template>
<div id="app">
<child-component :title="parentTitle"></child-component>
</div>
</template>
<script>
import childComponent from './components/ChildComponent'
export default {
data() {
return {
parentTitle: '父组件的title'
}
},
components: {
childComponent
}
}
</script>
<style lang="scss" scoped>
</style>
这样就简单的将父组件的parentTitle传递给了子组件进行显示,然后我们再给props多添加几个数据
// 子组件 ChildComponent.vue
<template>
<div>
<h2>{
{ title }}</h2>
<h2>{
{ content }}</h2>
<h2>{
{ obj }}</h2>
</div>
</template>
<script>
export default {
props: ['title','content','obj']
}
</script>
<style lang="scss" scoped>
</style>
// 父组件 App.vue
<template>
<div id="app">
<child-component :title="parentTitle" :content="parentContent" :obj="parentObj"></child-component>
</div>
</template>
<script>
import childComponent from './components/ChildComponent'
export default {
data() {
return {
parentTitle: '父组件的title',
parentContent: '父组件的content',
parentObj: {
username: 'zhangsan',
password: '123'
}
}
},
components: {
childComponent
}
}
</script>
<style lang="scss" scoped>
</style>
演示结果
2. 子传父
还是构造的上面的ChildComponent.vue子组件和App.vue父组件,需求就是通过点击子组件的button,统计点击数num,修改父组件的parentNum
// 子组件 ChildComponent.vue
<template>
<div>
<h2>{
{ num }}</h2>
<button @click="add">点击</button>
</div>
</template>
<script>
export default {
props: ['num'],
methods: {
add() {
// 修改父组件中的parentNum
// 触发自定义事件fn
this.$emit('fn')
}
}
}
</script>
<style lang="scss" scoped>
</style>
// 父组件 App.vue
<template>
<div id="app">
<!-- @fn 自定义事件 -->
<child-component :num="parentNum" @fn="changeNum"></child-component>
</div>
</template>
<script>
import childComponent from './components/ChildComponent'
export default {
data() {
return {
parentNum: 0
}
},
components: {
childComponent
},
methods: {
// 在父组件中构建一个修改这个数据的方法
changeNum() {
this.parentNum += 1
}
}
}
</script>
<style lang="scss" scoped>
</style>
演示结果
子组件向父组件传值,就是靠$emit() 这个专门用来触发自定义事件的方法,让changeNum这个函数来执行,从而修改父组件中的parentNum,然后我们再传递个参数,比如设置每次点击加10
// 子组件 ChildComponent.vue
<template>
<div>
<h2>{
{ num }}</h2>
<button @click="add(10)">点击</button>
</div>
</template>
<script>
export default {
props: ['num'],
methods: {
add(value) {
// 修改父组件中的parentNum
// 触发自定义事件fn
this.$emit('fn',value)
}
}
}
</script>
<style lang="scss" scoped>
</style>
// 父组件 App.vue
<template>
<div id="app">
<!-- @fn 自定义事件 -->
<child-component :num="parentNum" @fn="changeNum"></child-component>
</div>
</template>
<script>
import childComponent from './components/ChildComponent'
export default {
data() {
return {
parentNum: 0
}
},
components: {
childComponent
},
methods: {
// 在父组件中构建一个修改这个数据的方法
changeNum(val) {
this.parentNum += val
}
}
}
</script>
<style lang="scss" scoped>
</style>
演示结果
3. 兄弟组件之间传值
在component文件夹里再创建一个兄弟组件BrotherComponent.vue,然后每个兄弟组件中都有一个button按钮,需求就是,通过点击一个按钮,来改变另一个按钮的背景色
方法一:中央事件总线(这里用这种方式演示)
方法二:Vuex(关于vuex的使用可以移步这里)
中央事件总线就相当于新建一个空的vue对象bus,通过bus来发起自定义监听事件,然后在使用emit() 触发该自定义监听事件,并传递相应的参数
// 兄弟组件1 ChildComponent.vue
<template>
<div>
<button @click="changeBgc">按钮1</button>
</div>
</template>
<script>
import bus from './eventBus'
export default {
data() {
return {
newColor: 'green'
}
},
methods: {
changeBgc() {
// 触发自定义监听事件
bus.$emit('changeBgcEvent', this.newColor)
}
}
}
</script>
<style lang="scss" scoped>
</style>
// 兄弟组件2 BrotherComponent.vue
<template>
<div>
<button :style="{
backgroundColor: bgc }">按钮2</button>
</div>
</template>
<script>
import bus from './eventBus'
export default {
data() {
return {
bgc: 'red'
}
},
mounted() {
bus.$on('changeBgcEvent', (value) => {
this.bgc = value
})
}
}
</script>
<style lang="scss" scoped>
</style>
// eventBus.js
import Vue from 'vue'
export default new Vue()
感谢观看!下期再见!
转载:https://blog.csdn.net/weixin_46734347/article/details/115683494
查看评论