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'
        ]
      }
  • 相关阅读:
    天梯赛练习2 补题
    QFNU 天梯赛练习 1 补题
    2019 山东省赛 B 题
    CCPC2020 网络赛 总结
    一个比较好看的 Typora 主题
    〔OS〕磁盘调度算法
    〔OS〕页面置换算法
    〔OS〕多线程模拟实现生产者和消费者
    〔OS〕银行家算法
    LCS and LIS
  • 原文地址:https://www.cnblogs.com/sunflower-zy/p/7136111.html
Copyright © 2011-2022 走看看