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

Posted hellowoeld

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于vue组件之间传值父组件获取子组件的方法的主要内容,如果未能解决你的问题,请参考以下文章

Vue组件之间的传值方法

03、vue 页面跳转传值,父子组件传值

vue 父组件传数组或对象给子组件时 子组件修改值父组件也会做相应修改

Vue组件传值及插槽

Vue组件传值及插槽

Vue组件传值及插槽