vue 之 组件传值（父组件传值给子组件）

1.父组件给子组件 传值

1.父组件调用子组件的时候 绑定动态属性
Home.vue
 <v-header :title="title" :homemsg='msg'  > </v-header>      \\ data中要传递的数据
2、在子组件里面通过 props接收父组件传过来的数据
Header.vue

    props:['title','homemsg','run','home']                     //拿到传递过来的值

2.父组件给子组件 传方法

<v-header :title="title" :homemsg='msg' :run="run"  >   </v-header>     /// :run="run" 方法

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="home">
        <v-header :title="title" :homemsg='msg'  >   </v-header>  
         首页组件 
    </div>
</template>
<script>
/*
父组件给子组件传值

    1.父组件调用子组件的时候 绑定动态属性
        <v-header :title="title"></v-header>

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

    import Header from './Header.vue';
    export default{
         components:{        'v-header':Header      },
        data(){
            return {               
               msg:'我是一个home组件11',
               title:'HOme中首页',           
            }
        },
       methods:{ 
            run(data){
                alert('我是Home组件的run方法'+data)                        //run方法
            }

</script>

<template>
    <div>  
      <h2>我是头部组件----{{title}}-----{{homemsg}}</h2>
    <button @click="run('123')">执行父组件方法</button>             //run方法执行
        <br />
        <br />       
    </div>
</template>
<script>    
export default{
    data(){
        return{
            msg:'子组件的msg',         
        }
    },
    props:['title','homemsg','run'，]    
}

</script>