父组件要正向地向子组件传递数据或参数，子组件收到后，根据传递过来的数据不同，渲染不同的页面内容，或者执行操作。
这个正向传递数据的过程是通过props来实现的。子组件使用props来声明需要从父组件接受的数据。
注意的：
在js中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件的。

父组件中

<template>
    <div>
        <HelloWorld  :message1="messageToHelloWorld"></HelloWorld>
    <div/>
<template/>
<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  data() {
    return {
      messageToHelloWorld:'我是父组件向下传递的信息'
    }
  },
  components: {
    HelloWorld
  }
}
</script>

子组件中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Linkssss</h2>
    <h3>{{ message1 }}</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['message1'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

业务中，还有比较常用的组件验证：

Vue.component('my-component',{
   props:{
          //必须是数字类型
          propA:Number
          //必须是字符串或数字类型
          propB:[String,number]
          //布尔值,如果没有定义，默认值是true
          propC:{
            type:Boolean，
            default:true
          },
          //数字，而且是必传
          propD:{
            type:Number,
            required:true
          },
          //如果是数组或对象，默认值必须是一个函数来返回
          propE:{
            type:Array,
            default:function(){
                return [];
              }
          },
          //自定义一个验证函数
          propF:{
              validator:function (value){
                return value>10
             }
          }
    }
});

props的驼峰命名法

<div id="app">
        <cpn :c-info="info" :child-my-message="message"></cpn>  
    </div>

    <template id="cpn">
    <div>
        <h2>{{cInfo}}</h2>
        <h2>{{childMyMessage}}</h2>
    </div>
    </template>

 const cpn={
            template:'#cpn',
            props:{
                cInfo:{
                    type:Object,
                    default(){
                        return{}
                    }    
                },
                childMyMessage:{
                    type:String,
                    default: ''
                }
            }
        }
        const app=new Vue({
            el:'#app',
            data:{
                info:{
                    name:'why',
                    age:18,
                    height:1.88
                },
                message:'hello world'    
            },
            components:{
                cpn
            }
        })