子组件与父组件之间的传值

1.子组件传父组件  

子组件

<li class="smaili" v-for="(item,index) in MonitorList" :key="index"> 
                            <input type="checkbox" id="jack" :value="item.monitoringPointName" v-model="checkedNames">
                            <label class="oneMenuChild" for="jack"  @click="sendMsg(item.monitoringPointAddress)">{{item.monitoringPointName}}</label>
                        </li>
  @click="sendMsg(item.monitoringPointAddress)点击子组件的时候传值给父组件
sendMsg(videoUrl){
      // this.$emit('getVideoUrl',videoUrl)
      this.$emit('getVideoUrl',videoUrl)
      
    }

父组件接收

<div class="jkmenuaaa" >
      <jkmenu @getVideoUrl="videoUrlFn"/>    //对应子组件自动执行getVideoUrl
 </div>
videoUrlFn(data){
            console.log(data)
            this.monitorUrl = data
            this.videoPlay()
        },

2.父组件传子组件 

父组件

:currScenicId="currid" //要传递的数据
 <div class="pop_con">
                <yjyd1 class="con" :currScenicId="currid" v-show="iconNowIndex===2"/>
                <yjyd2 class="con" v-show="iconNowIndex===0"/>
            </div>

子组件

export default{
  props: ['currScenicId']
}

  

 
 

猜你喜欢

转载自www.cnblogs.com/xhrr/p/11958574.html