vue组件之间传值、父组件获取子组件的方法

1、子组件向父组件传值

   子组件

<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据
             this.$emit(‘func‘,this.msg)
         }
     }
}
</script>

  

子组件通过this.$emit()的方式将值传递给父组件

注意:这里的func是父组件中绑定的函数名

父组件:

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from ‘./child.vue‘
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}
</script>

 

2、父组件向子组件传值

父组件

<template>
    <div class="app">
        <child :date="msg"></child>
    </div>
</template>
<script>
import child from ‘./child.vue‘  //子组件
export default {
    data () {
        return {
            msg: "this is msg"
        }
    },
    components:{
        child, 添加到父组件的components中
    }
}
</script>

子组件

<template>
    <div class="app">
        <li >{{date}}</li>
    </div>
</template>
<script>
export default {
    props:[‘date‘],
    data () {
        return {
            
        }
    }
}

 

原文链接:https://blog.csdn.net/weixin_38888773/java/article/details/81901831

 

3、父组件获得子组件的方法

父窗体

<template>
  <div class="gl-wrap" id="box">
        <swiperTemp1 ref="temp1"></swiperTemp1>
  </div>
</template>
<script type="text/javascript">
  import swiperTemp1 from ‘./swiper1.vue‘
  export default {
    name: ‘index‘,
    data () {
      return {}
    },
    methods: {
     
    },
    mounted(){
      this.$refs.temp1.test(123)

    },
    components: {//模板
      swiperTemp1
    }
  }
</script>

子组件

<template>
</template>
<script>
 
  export default{
    data () {
      return {
      }
    },
    methods: {
      test(n){
         alert(n)
      }
    },
    mounted(){
    }
  }
</script>
文章来自:https://www.cnblogs.com/hellowoeld/p/12631524.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3