父向子通信
组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织：
-
页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
-
左侧内容区又分为上下两个组件
-
右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。
props（父向子传递）
父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
子组件通过props接收父组件数据，通过自定义属性的属性名
父组件使用子组件，并自定义了title属性：
<div id="app"><h1>打个招呼：</h1><!--使用子组件，同时传递title属性--><introduce title="大家好，我是锋哥"/> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">Vue.component("introduce",{// 直接使用props接收到的属性来渲染页面template:'<h1>{{title}}</h1>',props:['title'] // 通过props来接收一个父组件传递的属性})var app = new Vue({el:"#app"}) </script>效果：
props验证
我们定义一个子组件，并接收复杂数据：
const myList = {template: '\<ul>\<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\</ul>\',props: {items: {type: Array,default: [],required: true}}};-
这个子组件可以对 items 进行迭代，并输出到页面。
-
props：定义需要从父组件中接收的属性
-
items：是要接收的属性名称
-
type：限定父组件传递来的必须是数组
-
default：默认值
-
required：是否必须
-
-
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
我们在父组件中使用它：
<div id="app"><h2>传智播客已开设如下课程：</h2><!-- 使用子组件的同时，传递属性，这里使用了v-bind，指向了父组件自己的属性lessons --><my-list :items="lessons"/> </div> var app = new Vue({el:"#app",components:{myList // 当key和value一样时，可以只写一个},data:{lessons:[{id:1, name: 'java'},{id:2, name: 'php'},{id:3, name: 'ios'},]} })效果：
type类型，可以有：
注意：子组件模板有且只有一个根标签
动态静态传递
给 prop 传入一个静态的值：
<introduce title="大家好，我是锋哥"/>给 prop 传入一个动态的值： （通过v-bind从数据模型中，获取title的值）
<introduce :title="title"/>静态传递时，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 props。
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个JavaScript表达式而不是一个字符串。--> <blog-post v-bind:likes="42"></blog-post><!-- 用一个变量进行动态赋值。--> <blog-post v-bind:likes="post.likes"></blog-post>
总结
