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> <!--title的值就传过来了-->
        <!--冒号后面的名称要与子组件定义的相同  引号为父组件中的值-->
        <hr>
        首页组件
    </div>

</template>

<script>
/**
 * 父组件给子组件传值
 * 
 *  1.父组件调用子组件的时候 绑定动态属性
 *      <v-header :title="title"></v-header>
 *  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>   <!--要与下面props里的名称一致-->

        <button @click="homerun('123')"> 执行父组件的方法</button>   <!--'123'为父组件run方法里的实参-->

        <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>

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