vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

Home.vue

 <template>
     <!-- 所有的内容要被根节点包含起来 -->
     <div id="home">

         <v-header :title="title" :homemsg='msg'  :run="run"  :home="this"></v-header>

         <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:'首页111'
             }
         },
         components:{

             'v-header':Header
         },
         methods:{

             run(data){

                 alert('我是Home组件的run方法'+data);
             }
         }

     }

 </script>

 <style lang="scss" scoped>

     /*css  局部作用域  scoped*/

     h2{

         color:red
     }

 </style>

Header.vue

 <template>

     <div>

         <h2>我是头部组件--{{title}}---{{homemsg}}</h2>

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

         <br />
         <br />

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

     </div>
 </template>

 <script>

 export default{

     data(){

         return{
             msg:'子组件的msg'
         }
     },
     methods:{
         getParent(){
             // alert(this.title)

             // alert(this.home.title)

             this.home.run()

         }

     },
     props:['title','homemsg','run','home']

 }

 </script>