码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-10-13 15:05:45      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:button   首页   div   header   click   css   efs   组件   UNC   

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

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>

 

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

标签:button   首页   div   header   click   css   efs   组件   UNC   

原文地址:https://www.cnblogs.com/xuepangzi/p/11666310.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!