zoukankan      html  css  js  c++  java
  • vue子父组件通信

    之前在用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'
        ]
      }
  • 相关阅读:
    简历的快速复制
    使用stringstream对象简化类型转换
    猴子吃桃
    new和delete运算符
    绘制正余弦曲线
    计算学生的平均成绩
    判断是否为回文字符串
    统计各种字符个数
    验证用户名
    回溯法(挑战编程)
  • 原文地址:https://www.cnblogs.com/sunflower-zy/p/7136111.html
Copyright © 2011-2022 走看看