Vue.js学习（11）-父子组件传值，传方法

  1.父组件给子组件传值步骤

•   父组件调用子组件的时候，绑定动态属性
•   在子组件通过props接收父组件传过来的数据

2.实现实例

Header.vue

<template>
  <div>
    <br>
    <h2 class="header">我是头部组件-------{{title}}-------{{homemsg}}</h2>
    <button @click="run('12345678')">测试执行父组件的run方法</button>
    <hr>
  </div>
</template>

<script>
    export default {
        name: "Header",
      data(){
        return{
          msg:"Header.vue是一个头部组件",
        }
      },
      methods:{

      },
      props:["title","homemsg","run"]
    }
</script>

<style scoped>
.header{
  color: red;
  background: black;
}
</style>

Home.vue

<template>
    <div>
      <v-header :title="title" :homemsg="msg" :run="run"></v-header>
    </div>
</template>

<script>
  import Header from "./Header.vue";
    export default {
        name: "Home",
      data(){
          return{
            msg:"Home.vue是一个首页组件",
           title:"首页",
          }
      },
      methods:{
          run(data){
            alert("我是Home组件的run方法" + data);
          }
      },
      mounted(){

      },
      components:{
         "v-header":Header,
      }
    }
</script>

<style scoped>

</style>

3.父组件给子组件传值，子组件对值进行验证

  props:{
          "title":String,
           "homemsg":String,
           "run":Function

       /* ["title","homemsg","run"]*/
      },