组件通信 手动挂载 自定义事件 动态事件 slot插槽

组件通信

1. 为什么要进行组件通信？

   组件可以说是具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件互相之间要建立联系，这个联系我们就称之为通信。

2. 组件通信的方式有一下集中（王者级）

   1.父子组件通信

   使用props来实现

     ```<div id="app">
         <Father></Father>
       </div>
       <template id="father">
         <div>
           <h3> 这里是父组件 </h3>
           <hr>
           <Son :aa = "money" :mask-flag = "maskFlag"/>
         </div>
       </template>
       <template id="son">
         <div>
           <h3> 这里是son组件 </h3>
           <p> 父亲给了我  {
         { aa }}  钱  </p>
           <p> {
         { maskFlag }} </p>
         </div>
       </template>
     </body>
     
     <script>
       /* 
         props
           1. 在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
             <Son :money = "money"/>
           2. 在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以使一个数组
             Vue.component('Son',{
               template: '#son',
               props: ['money']
             })
           3. 在子组件模板中，接收到的属性可以像全局变量一样直接使用
             <p> 父亲给了我  {
         { money }}  钱  </p> 
       
     
           问题1： props接收的money  和  子组件上绑定的自定义属性money是不是同一个？
               兵哥个人： 一般都是  自定义属性会和数据写成一致
           问题2： 自定义属性的书写
               money         ---->   money
     
               mask-flag     ---->   maskFlag
           问题： 为什么data要定义为一个函数？
               1. 组件是一个独立的个体，那么它应该拥有自己的数据，这个数据应该是一个独立的数据
               2. 也就是说这个数据应该有独立作用域，也就是有一个独立的使用范围，这个范围就是这个组件内
               3. js的最大特征是：函数式编程 ， 而函数恰好提供了独立作用域
           问题： 为什么data要有返回值？返回值还是一个对象？
               1. 因为Vue是通过observer来观察data选项的，所有必须要有返回值
               2. 因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置
     
        */
     
       Vue.component('Father',{
         template: '#father',
         data () { // 为什么要将data定义为函数？
     
           
           return {
             money: 2000,
             maskFlag: 10000000000
           }
         }
       })
       Vue.component('Son',{
         template: '#son',
         props: ['aa','maskFlag']          
       })
     
       new Vue({
         
       }).$mount('#app')
     </script>
     				
     ```
   

   2.子父组件通信

   自定义事件

     ```
     			<div id="app">
         <Father></Father>
       </div>
       <template id="father">
         <div>
           <h3> 这里father组件 </h3>
           <p> 儿子给了我   {
         { money }} </p>
           <Son @give = "getHongbao"/>
         </div>
       </template>
       <template id="son">
         <div>
           <button @click = "giveFather"> give </button>
           <h3> 这里是son组件 </h3>
         </div>
       </template>
     </body>
     <script>
       /* 
         自定义事件
             1. 自定义的   通过  $on  定义    $emit触发
             2. 通过绑定在组件身上定义，通过 $emit触发
     
     
         子父通信流程
             1. 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上
     
                 <Son @aa = "fn"/>       //这边要注意： fn是要在父组件配置项methods中定义
     
             2. 在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件
     
               Vue.component('Son',{
                 template: '#son',
                 data () {
                   return {
                     hongbao: 500
                   }
                 },
                 methods: {
                   giveFather () {
                     //如何进行父组件给子组件的自定义事件触发