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

网友投稿 237 2023-04-28


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

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

子组件传值给父组件:

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

模板:

在data中定义:switchStatus = true;

方法:

switchViewBtn(){

      let that=this;

      this.$emit("parentView",that.switchStatus);

    },

父组件:模板:

方法:

changeView(msg){

    this.switchStatus = msg;

  }

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

父组件传值给子组件:

父组件:模板:

在data中赋值:

export default {

      data() {

        return {

          data:‘zy'

         }

      }

    }

子组件中接受代码:

export default {

    data() {

      return {

      GvSAUfd  data:‘zy'

        }

      },

    props:[

       'nhttp://ame'

    ]

  }

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java中switch case语句需要加入break的原因解析
下一篇:Spring整合多数据源实现动态切换的实例讲解
相关文章

 发表评论

暂时没有评论,来抢沙发吧~