两个子组件之间的传值

举例：将A的drawerStart数值传递给B,来决定B的某个样式是否显示,并且点击 @click="changerDrawerStart"会改变 drawerStart的数值（这里可以使用监听watch，监听drawerStart的改变），通过$emit方法来实现传参的方式

组件A代码：

思路：如果两个子组件在同一个父组件上，可以将父组件作为一个桥梁(用一个中间值)，中间商，先将决定性元素的子组件A的值先传给父组件，再通过父组件传给另外一个子组件B

具体步骤如下：

子组件A-主动组件

<template>
  <div class="input-search" :style="{width+'px'}">
    <p class="searchBody">
      <img :src="searchImg" alt=""  @click="changerDrawerStart" v-show="drawerStart" >
    </p>
  </div>
</template>
<script>
export default {
  name: 'inputSearch',//子组件的名称
  data () {
    return {
      drawerStart: false,//初始化drawerStart
    }
  },
  watch: {
    drawerStart (t) {
      console.log(‘t’，t)监听drawerStart，查看drawerStart的改变，可以打印一下t，这里的t就是指代drawerStart的数值
      this.$emit('drawerShow', t)//主要是通过$emit方法来实现传参的方式，第一个参数是自定义事件名称，第二个则是要传的数据
    }
  },
  methods: {
    changerDrawerStart () {//点击，改变drawerStart的值
      this.drawerStart = !this.drawerStart
    }
  }
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

桥梁-父组件

<template>
<div class="left-nav-main">
  <input-search @drawerShow="drawerShow" ></input-search>//子组件A
  <header-drawer//子组件B
   :isShow='isShow'
  ></header-drawer>
</div>
</template>
<script>
export default {
  data () {
    return {
      isShow : false,//中间值isShow初始化
    }
  },
  methods: {
    drawerShow (t) {//将drawerShow的值（即t），赋给中间值isShow
      this.isShow = t
    },
  }
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

子组件B-被控制组件：

<template>
<div class="drawer" >
    <p  v-show="!isShow" class="current-title" >{{headerData.renderTitle}}</p>
</div>
</template>
<script>
export default {
    props: {//props接受父组件传递的值。
      isShow:{
        type:Boolean,
        default:[]
      }
    },
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

方法总结：两个步骤：
1.子组件A=>父组件：组件A使用$emit传递
2.父组件=>子组件B：组件B使用props接受

 

原文地址：https://blog.csdn.net/qq_43371287/article/details/87928626