我要悄悄的学Vue, 然后找一份工作(7).

了解组件的通信，才能更好的发挥组件的力量.
父子组件究竟是如何通信的呢？ 组件到底还有什么方法是你不知道的，快来看看吧。(父子组件通信， props参数验证， 组件访问， 绘制组件通信图)

组件前篇介绍:

不再迷路:

---

父子组件之间的通信(重点):

  在前一天笔记中， 介绍到组件在Vue中是非常实用的一个部分，
  我们可以把大的模块进行细分， 分成很多很多的部分组件, 甚至我们可以把整个页面看作成一个大的组件，
  Vue实例也是一个大组件， 事实上他是root组件.

通信图:

---

1. 为什么要通信？

1. 从交互效果来讲， 组件之间如果没有通信，只是各自做自己的事情， 那么整体的事件交互就会变成很差， 没有一点联动效果，
   这在web设计中是不可取的，就像我们国家， 要与其他国家进行国际贸易，进行文化输出，这样我们国家才能越来越强.
  
2. 从性能消耗来讲,  如果组件为了得到数据各自向服务端发送请求，从而来获取一些数据， 那么这样对服务器的负担是很大的， 尤其
   是当组件数量达到一定数量的时候， 这必然是一种大型的消耗, 但是如果我们所有请求都交给一个组件，交给root组件(Vue实例)，让让它去进行数据的发送和获取，这样就降低了服务端的压力， 然后由root组件进行数据的分发，从而通过组件之间的通信完成这些任务，这样的效率非很高.

---

2. 父组件(大组件) —> 子组件(小组件) 通信

  怎么定义父组件， 子组件呢？ 
  component: 这个参数写在哪里， 这个就是父组件， 剩下的就是子组件了,
  Vue实例是最大的父组件，root组件
  父->子 通信步骤:
    父:
       const vm = new Vue({
        el:"#vm",
        data() {
          return {
            movies:["三国演义", "红楼们", "西游记", "水浒传"],
          }
        },
       })
    
    子:
      Vue.component("cpnMovies", {
        template:"#cpnMovies",
        props:{
          movies:Array,   // 子组件使用props参数进行接受父组件传入的值
        }
      })
    
    组件模板:
      <template id="cpnMovies">
        <div>
          <ul>
            <li v-for="item in movies">{
  {item}}</li>
          </ul>
        </div>
      </template>
    
    使用声明:
      上面模板中遍历的是来自子组件的props参数， 但是这样还不够， 我们需要在使用组件的时候，进行参数声明
      <cpn-Movies :movies="movies"></cpn-Movies>
      使用 v