「Vue」父子组件之间的传值及调用方法

时间:2021-08-15 06:12:24

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