码迷,mamicode.com
首页 > 其他好文 > 详细

两个子组件之间的传值

时间:2020-12-10 11:11:19      阅读:3      评论:0      收藏:0      [点我收藏+]

标签:tom   round   function   OLE   asi   prism   methods   type   bottom   

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

组件A代码:

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

具体步骤如下:

子组件A-主动组件

<template>
  <div class="input-search" :style="{width: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

两个子组件之间的传值

标签:tom   round   function   OLE   asi   prism   methods   type   bottom   

原文地址:https://www.cnblogs.com/1549983239yifeng/p/14092102.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!