初识vue之父组件给子组件传值

父组件传值给子组件，主要是用props,可以传递值，方法，对象(比如自己)
首先我定义一个header.vue,用来作为home中的子组件

<template>
    <div>
        <!-- title用来显示父组件传过来的值 -->
        <h3>{{title}}</h3>
        <!-- run用来调用父组件传过来的方法 -->
        <button @click="run">我是header的按钮</button>
        
        <button @click="getParent()">我调用home的run方法</button>
    </div>
</template>
<script>
export default {
   
    methods:{
        getParent(){
            //直接通过home来调用home中定义的homeRun()方法
            this.home.homeRun();
            // 直接获取home中的title值
            console.log(this.home.title)
        }
    },
    //接收父组件home传过来的值:title，传过来的方法run,传过来的父组件home
    //  props:["title",'run','home']
    //  第二种写法,用来接收传递过来值的类型,比如传过来的title必须是String类型，run必须是一个方法，home必须是一个对象
    props:{
        "title":String,
        'run':Function,
        'home':Object
    }
}
</script>

然后定义一个父组件home.vue

<template>
    <div>
        <!-- 将title值传给子组件，将方法homeRun传递给Header组件，将自己传递给header组件 -->
        <Header :title="title" :run="homeRun" :home="this"></Header>
    </div>
</template>
<script>
import Header from './Header.vue'
export default {
    data(){
        return{
            title:"我是Home的Header"
        }
    },
    methods:{
        homeRun(){
            alert("我是Home的alert")
        }
    },
    components:{
       Header
    },
    props:{
        
    }
}
</script>