欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 09:10:23
之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件:   子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法   ...

之前在用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子父组件通信的实现代码,希望对大家有所帮助