Vue 父组件给子组件传值 传方法 以及将整个实例传给子组件

父组件是如何给子组件传值呢？我总结了一下大体的方法，如下：

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

<v-header :title="title">v-header>    

2. 在子组件里面通过 props接收父组件传过来的数据

完整代码如下：
Home.vue

<template>
    
    <div id="home">
        
        <v-header :title="title" :homemsg='msg' :homerun='run' :home="this">v-header> 
        
        <hr>
        首页组件
    div>

template>

<script>
/**
 * 父组件给子组件传值
 * 
 *  1.父组件调用子组件的时候 绑定动态属性
 *      
 *  2.在子组件里面通过 props接收父组件传过来的数据
 * 
 */
import Header from './Header.vue';   
export default{
    data(){
        return {
            msg:'我是一个home组件',
            title:'首页',
        }
    },
    components:{
        'v-header':Header,   //挂载组件
    },
    methods:{
        run(data){
            alert('我是Home组件的run方法'+data)  // data为参数
        }
    },
}
script>

<style scoped>
    
style>

Header.vue

<template>
    <div>
        <h2>我是一个头部组件---{{title}}---{{homemsg}}h2>   

        <button @click="homerun('123')"> 执行父组件的方法button>   

        <button @click="getParent()"> 获取父组件的数据和方法button>

    div>
template>

<script>
export default {
    data(){
        return{
            msg:'子组件的msg'/*子组件和父组件都有msg，
            调用的依然是父组件的数据*/
        }
    },
    methods:{
        getParent(){
            //alert(this.title)   父组件中title的数据
            //alert(this.home.title)   照样可以弹出父组件title的数据

            this.home.run()      //执行父组件run的方法
        }

    },
    props:['title','homemsg','homerun','home']  //父组件调用子组件时给子组件传值

}
script>

希望此篇播客能对读者有所帮助，若有任何疑问或是不解，请在下方评论，谢谢。