vue父组件获取子组件的数据和方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue父组件获取子组件的数据和方法相关的知识,希望对你有一定的参考价值。

参考技术A 1.调用子组件的时候 定义一个ref

2.在父组件里面通过

在子组件里面通过

摘自: https://www.jianshu.com/p/b6c553b89f26

12.父组件主动获取子组件的数据和方法

父组件主动获取子组件的数据和方法

1.父组件Home.vue

<template>
    <div>
        <h2>{{msg}}</h2>
        <!-- 1.调用子组件的时候调用一个ref -->
        <!-- 2.在父组件中通过this.$refs.header.数据 this.$refs.header.方法 调用子组件的数据和方法 -->
        <!-- 注意,第一步是ref,第二步是refs -->
        <v-header ref="header"></v-header>
        <button @click="getData()">获取子组件数据</button>
        <button @click="getFunction()">获取子组件的方法</button>
    </div>
</template>
<script>
import Header from "./Header.vue";
export default {
  name: home,  
  data () {
    return {
        msg:首页组件,
    }
  },
  methods:{
    getData(){
      alert(this.$refs.header.msg)
    },
    getFunction(){
      this.$refs.header.run()
    }
  },
  components:{
    v-header:Header
  }
}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>

2.子组件Header.vue

<template>
    <div>
        <h2>{{msg}}</h2>
    </div>
</template>
<script>
export default {
  name: Header,  
  data () {
    return {
        msg:头部组件,
        title:子组件
    }
  },
  methods:{
      run(){
          alert(子组件run方法)
      }
  }
}
</script>
<style lang="scss" scoped>
h2{
    color: green;
}
</style>

 

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

vue 的父组件和子组件互相获取数据和方法

vue---父组件监听子组件并获取子组件的值(子组件多个值)

React 父子组件通信

vue 父组件调用子组件方法

vuejs子组件怎么获取父组件的值

12.父组件主动获取子组件的数据和方法