Vue父子组件，兄弟组件间传值（最简洁）

初始状态：

父组件：

<template>
  <div class="home">
    首页(父组件)
    <advert />
    <advert-space />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import advert from '../advert/index.vue'
import advertSpace from '../advert-space/index.vue'

export default Vue.extend({
  name: 'HomeIndex',
  components: { advert, advertSpace }
})
</script>

<style lang="scss" scoped></style>

子组件：

<template>
  <div class="advert">广告管理(子组件)</div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AdvertIndex'
})
</script>

<style lang="scss" scoped></style>

兄弟组件：

<template>
  <div class="advert-space">广告位管理(兄弟组件)</div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AdvertSpaceIndex'
})
</script>

<style lang="scss" scoped></style>

效果展示：

子向父传值：

父组件：

<template>
  <div class="home">
    首页(父组件)
    传值效果展示=> : {{this.fatherValue}}
    <!-- 在子组件上挂载 自定义事件, 便于子组件的调用 -->
    <advert @father-methods="click" />
    <advert-space />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import advert from '../advert/index.vue'
import advertSpace from '../advert-space/index.vue'

export default Vue.extend({
  name: 'HomeIndex',
  components: { advert, advertSpace },
  data () {
    return {
      // 父组件的值
      fatherValue: '父组件的值 B'
    }
  },
  methods: {
    // 接收子组件传递的值(用 ts 写的,所以有定义数据类型)
    click (payload: string) {
      this.fatherValue = payload
    }
  }
})
</script>

<style lang="scss" scoped></style>

子组件：

<template>
  <div class="advert">广告管理(子组件)
    <!-- 子组件绑定一个 触发传值事件 -->
    <button @click="passValue">传值</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AdvertIndex',
  data () {
    return {
      // 子组件的值
      childrenValue: '子组件的值 A'
    }
  },
  methods: {
    passValue () {
      console.log('advert')
      // 调用父元素方法 传值
      this.$emit('father-methods', this.childrenValue)
    }
  }
})
</script>

<style lang="scss" scoped></style>

父向子传值：

父组件：

<template>
  <div class="home">首页(父组件)
    <advert />
    <advert-space :brotherValue="fatherValue" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import advert from '../advert/index.vue'
import advertSpace from '../advert-space/index.vue'

export default Vue.extend({
  name: 'HomeIndex',
  components: { advert, advertSpace },
  data () {
    return {
      // 父组件的值
      fatherValue: '父组件的值 B'
    }
  }
})
</script>

<style lang="scss" scoped></style>

子组件：

<template>
  <div class="advert-space">广告位管理(兄弟组件)
    展示效果=>: {{this.brotherValue}}
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AdvertSpaceIndex',
  // 接收父组件传递的值
  props: {
    brotherValue: {
      type: String,
      required: true
    }
  }
})
</script>

<style lang="scss" scoped></style>

效果展示：

兄弟组件传值：

应用场景是：点击子组件，使兄弟组件的内容显影

子组件（传值）：

<template>
  <div class="advert">广告管理(子组件)
    <!-- 子组件绑定一个 触发传值事件 -->
    <button @click="passValue">传值</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AdvertIndex',
  methods: {
    passValue () {
      // 调用父元素方法 传值
      this.$emit('father-methods', true)
    }
  }
})
</script>

<style lang="scss" scoped></style>

父组件（接收子组件传值，并传递给子组件的兄弟组件）：

<template>
  <div class="home">首页(父组件)
    <!-- 在子组件上挂载 自定义事件, 便于子组件的调用 -->
    <advert @father-methods="click" />
    <advert-space v-model="fatherValue" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import advert from '../advert/index.vue'
import advertSpace from '../advert-space/index.vue'

export default Vue.extend({
  name: 'HomeIndex',
  components: { advert, advertSpace },
  data () {
    return {
      // 父组件的值
      fatherValue: false
    }
  },
  methods: {
    // 接收子组件传递的值(用 ts 写的,所以有定义数据类型)
    click (payload: boolean) {
      this.fatherValue = payload
    }
  }
})
</script>

<style lang="scss" scoped></style>

兄弟组件（接收父组件传值，根据 值 控制弹窗显影）：

<template>
  <div class="advert-space">广告位管理(兄弟组件)
    展示效果=>:
    <div v-show="this.showPopup">
      显影内容
      <button @click="close"> 隐藏内容 </button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AdvertSpaceIndex',
  data () {
    return {
      // 默认内容隐藏
      showPopup: false
    }
  },
  // 接收父组件传递的值
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 隐藏内容
    close () {
      this.$emit('input', false)
    }
  },
  watch: {
    // 监听 value 值
    value (newVal: boolean, oldVal) {
      this.showPopup = newVal
    }
  }
})
</script>

<style lang="scss" scoped></style>

展示效果：

---

Vue组价之前直接传值的话可以看看我之前写的文章：

Vue组件之间进行传值&调用方法