13、父子组件获取值（非传值）

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

1、父组件调用子组件，定义ref

<template>
  <div>
    <h2>首页</h2>
    <br/>
    <v-header ref="header"></v-header>
  </div>
</template>

<script>
  import Header from './Header.vue';

  export default {
    components: {
      'v-header': Header
    }
  }
</script>

2、在父组件中通过this.$refs.header获取子组件的值、方法

子组件代码：

<template>
  <div>
    <h2>我是头部</h2>
    <br/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '头部组件'
      }
    },
    methods: {
      run() {
        alert("头部组件")
      }
    }
  }
</script>

父组件代码：

<template>
  <div>
    <h2>首页</h2>
    <br/>
    <v-header ref="header"></v-header>
    <button @click="getChild">获取子组件的值和方法</button>
  </div>
</template>

<script>
  import Header from './Header.vue';

  export default {
    methods: {
      getChild() {
        alert(this.$refs.header.title);
        this.$refs.header.run();
      }
    },
    components: {
      'v-header': Header
    }
  }
</script>

二、子组件获取父组件的数据和方法，

通过this.$parent获取数据和方法

父组件代码：

<template>
  <div>
    <h2>首页</h2>
    <br/>
    <v-header></v-header>
  </div>
</template>

<script>
  import Header from './Header.vue';

  export default {
    data() {
      return {
        title: '首页组件'
      }
    },
    methods: {
      run() {
        alert("首页组件")
      }
    },
    components: {
      'v-header': Header
    }
  }
</script>

子组件代码：

<template>
  <div>
    <h2>我是头部</h2>
    <br/>
    <button @click="getParent">获取父组件数据和方法</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '头部组件'
      }
    },
    methods: {
      getParent() {
        alert(this.$parent.title);
        this.$parent.run();
      }
    }
  }
</script>