父组件主动获取子组件的方法和属性

第一步:调用自组件的时候,给自组建定义一个Header

    <v-header ref='headerInfo'></v-header>

第二步:在父组件里面通过

    this.$refs.headerInfo.属性

    this.$refs.headerInfo.方法();

示例:

自组件:Header.vue 

<template>
    <div id="Header">
        <p>我是一个头部组件</p>
    </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      text:'我是子组件的属性'
    }
  },
  methods:{
    run(){
      alert('我是子组件的方法');
    }
  },
}
</script>

父组件主动调用子组件的方法:

<template>
    <div id="Header">
        <p>我是一个头部组件</p>
    </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      text:'我是子组件的属性'
    }
  },
  methods:{
    run(){
      alert('我是子组件的方法');
    }
  },
}
</script>

 

相关文章:

  • 2021-05-19
  • 2019-06-20
  • 2022-12-23
  • 2021-04-30
  • 2021-12-09
  • 2021-05-31
  • 2022-12-23
猜你喜欢
  • 2021-07-21
  • 2022-12-23
  • 2021-12-05
  • 2022-12-23
  • 2022-12-23
  • 2021-07-05
  • 2021-08-23
相关资源
相似解决方案