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:'哈哈哈'}
    }
    }
    }
    })

  • 相关阅读:
    IntelliJ IDEA常用的快捷键积累总结
    Linux命令(六)之防火墙iptables的相关操作以及端口的开放
    Linux命令(五)之service服务查找、启动/停止等相关操作
    Linux命令(四)之常用文件拷贝/移动,文件解压缩,文件查找等相关的操作
    Linux命令(三)vim编辑器的常用命令
    Linux命令(一)之目录结构、Linux终端操作、关机重启等一些基本操作
    zookeeper核心知识与投票机制详解
    zuul开发实战(限流,超时解决)
    IO多路复用技术详解
    Linux五大网络IO模型图解
  • 原文地址:https://www.cnblogs.com/wrxblog/p/10504446.html
Copyright © 2011-2022 走看看