12. The active parent component data acquisition method and subassembly

Active parent component data acquisition method and subassembly

1. The parent component Home.vue

< Template > 
    < div > 
        < H2 > {{MSG}} </ H2 > 
        <-! Time 1. call calls a subassembly REF -> 
        <-! 2. within parent components by this $ refs. ... .header data this $ refs.header method call data and methods subassemblies -> 
        <! - Note that the first step is the ref, the second step is refs -> 
        < v-header ref = "header " > </ V-header > 
        < Button @click =" the getData () " > Get data subassembly </ Button > 
        < Button @click =" getFunction () "> The method of obtaining the subassembly </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. subassemblies Header.vue

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