飞道的博客

Vue父子组件传值以及兄弟组件传值

587人阅读  评论(0)

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
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场