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>
    <child @fatherFun="fatherFun"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherFun() {
        console.log('父方法');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="sonFun()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      sonFun() {
        this.$emit('fatherFun');
      }
    }
  };
</script>

 

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

父窗体

<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>