zoukankan      html  css  js  c++  java
  • 「Vue」父子组件之间的传值及调用方法

    a.父组件向子组件传值
    data(){},props数据区别
    data中的数据可读可写,是自己的数据
    props是个数组,中的数据是父组件传递过来的,只读不能写
    <login :dmsg='msg'></login> 父组件向自定义的子组件中传值
    var myvue = new Vue({
      el:"#myvue",
      data:{
        flag:'reg',
        msg:'这是父组件'
      },
      methods:{
      },
      components:{
        login:{
          template:'<h2>这是子组件---{{dmsg}}</h2>',
          props:['dmsg'] 子组件定义父组件的传值
          data(){
            return {
              smsg:'这是子组件的自有值'
              }
           }
          }
        }
    })
    b.子组件调用父组件方法并向父组件传值
    <div id="myvue">
      <login :dmsg='msg' @dshow='show'></login> @dshow='show'是父组件方法传递
    </div>


    <script>
    var myvue = new Vue({
      el:"#myvue",
      data:{
        flag:'reg',
        msg:'这是父组件',
        dmsg:null,
      },
      methods:{
        show(data){
        this.dmsg = data
      }
    },
      components:{
        login:{
          template:'<div><h2>这是子组件---{{dmsg}}---{{smsg}}</h2><input type="button" name="" id="" value="大按钮" @click="myshow"/></div>',
          props:['dmsg'],
          methods:{
            myshow(){
              this.$emit('dshow',this.smsg) $emit是触发的意思,触发传递过来的方法并传递数据给父方法赋值
        },
    },
      data(){
        return {
          smsg:'这是子组件的自有值'
        }
      }
    }
    }
    })
    </script>

    ref 调用DOM组件和自定义组件,及自定义组件的值和方法,可以实现父组件调用子组件方法
    <div id="myvue">
      <h3 ref='myref'>今天天气真好</h3>
      <input type="button" name="" id="" value="获取元素" @click="show"/>
      <login ref='refh2'></login>
    </div>


    <template id="tmp">
      <h2>今天天气不好</h2>
    </template>


    var myvue = new Vue({
      el:"#myvue",
      data:{

        },
      methods:{
        show:function(){
          this.$refs.refh2.sshow()
        }
      },
      components:{
        login:{
          template:'#tmp',
          methods:{
          sshow(){console.log('子组件方法')}
        },
      data(){
        return {msg:'哈哈哈'}
    }
    }
    }
    })

  • 相关阅读:
    JasperReport环境设置
    JasperReports入门,JasperReports是什么?
    插入算法
    java web项目(spring项目)中集成webservice ,实现对外开放接口
    Java代码中的(解压7z加密版)
    Java底层基础题
    sql执行过长,如何入手优化
    集群环境(session多服务器共享的方案梳理)
    SimpleDateFormat优化写法
    java面试题总结
  • 原文地址:https://www.cnblogs.com/wrxblog/p/10504446.html
Copyright © 2011-2022 走看看