vue 组件传值

作者: 1994陈 | 来源:发表于2019-07-16 15:48 被阅读5次

子传父:

子
<el-menu-item index="1" @click='asideOnOff()'><i class='el-icon-caret-left'></i></el-menu-item>

data(){
        return{
           isCollapse: true
        }
     },
     methods:{
       asideOnOff(){
         this.isCollapse= !this.isCollapse
         this.$emit('asideOnOff',this.isCollapse)
       }
     }
父:
<el-header><HeaderPart  @asideOnOff="asideOnOff"/></el-header>

methods:{
    asideOnOff(data){
      console.log(data)
    }
  }

父传子:

父:
 <el-aside width="200px"><AsidePart :isCollapse='isCollapse'/></el-aside>

methods:{
     asideOnOff(data){
       this.isCollapse=data
     }
   }
子:
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isShow">

 props:{
     isCollapse:{
         type:Boolean
     }
   },
   watch:{ //watch监听数据发生变化更新当前组件状态
      isCollapse(val){
          this.isShow=this.$props.isCollapse
      }
   },

相关文章

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

  • (VUE3) 四、组件传值(父子组件传值 & 祖孙组件传值 &v

    1.父子组件传值 vue2中的父子组件传值:父组件: 子组件: vue3中的父子组件传值: 还是用props接收父...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • 前端基础搬运工-VUE模块

    十、VUE模块 基础部分 1. Vue组件间传值 答: -[ ] 1.父子之间的传值 父组件向子组件传值通过p...

  • Vue父子组件通信和双向绑定

    本篇文章主要介绍父子组件传值,组件的数据双向绑定。 1. 基础父子组件传值 父子组件传值,这是Vue组件传值最常见...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • vue2.0的三种常用传值方式,并且如何实现?

    vue2.0 组件传值方式有三种:父组件向子组件传值,子组件向父组件传值,非父子组件传值 : 父传子: 首先现在父...

  • Vue组件传值

    vue组件传值 一、父组件向子组件传值方式: 1. 子组件中定义props,父组件向子组件props进行传值。 2...

  • Vue 父组件向子组件传值

    Vue 父组件向子组件传值 demo代码 (vue.js ...

网友评论

    本文标题:vue 组件传值

    本文链接:https://www.haomeiwen.com/subject/rlxtlctx.html