12、父子组件传值

一、什么是父子组件。

首页组件引用头部组件，则首页组件是头部组件的父组件，头部组件是首页组件的子组件。 

二、父子组件传值

1、父组件调用子组件的时候，绑定动态属性：

:title="title"：传值

:run="run"：传方法

:home="this"：传组件

父组件代码：

<template>
  <div>
    <h2>首页</h2>
    <br/>
    <v-header :title="title" :run="run" :home="this"></v-header>
  </div>
</template>

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

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

2、子组件用props接收父组件属性

子组件代码：

<template>
  <div>
    <h2>我是头部---{{title}}</h2>
    <br/>
    <button @click="run">获取父组件run方法（一）</button>
    <br/>
    <button @click="getParent">获取父组件run方法（二）</button>
  </div>
</template>

<script>
  export default {
    name: "Header",
    methods: {
      getParent() {
        alert(this.home.title);
      }
    },
    props: ["title", "run", "home"]
  }
</script>