首页 > 编程 > JavaScript > 正文

vue子父组件通信的实现代码

2019-11-19 16:07:37
字体:
来源:转载
供稿:网友

之前在用vue写子父组件通信的时候,老是遇到问题!!!

子组件传值给父组件:

  子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法   

  模板:

<div v-on:click="switchViewBtn">切换视图</div>

  在data中定义:switchStatus = true;

  方法:  

switchViewBtn(){      let that=this;      this.$emit("parentView",that.switchStatus);    },

  父组件:模板:   

<div @parentView="changeView" :msg="msg"></div>

  方法: 

changeView(msg){    this.switchStatus = msg;  }

  这样就可以将子组件的值传给父组件了。

父组件传值给子组件:

  父组件:模板:

 <div :name="name">切换视图</div>

  在data中赋值:

 export default {      data() {        return {          data:‘zy'         }      }    }

子组件中接受代码:

export default {    data() {      return {        data:‘zy'        }      },    props:[       'name'    ]  }

以上所述是小编给大家介绍的vue子父组件通信的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表