前端知识点随笔总结

1.组件通信

1. 组件通信方式1：props

   1. 使用场景：父子通信

   2. 传递数据类型：

      • 可能是函数 -----------实质子组件想给父亲传递数据
      • 可能不是函数-----------实质就是父亲给子组件传递数据
      • 使用提示：

   3. 特殊情况：路由传递props

      • 布尔值类型，把路由中params参数映射为组件props数据
      • 对象，静态数据，很少用
      • 函数，可以把路由中params|query参数映射为组件props数据

2. 组件通信方式2：自定义事件

   1. 使用场景：子组件→父组件
   2. 使用提示： $emit $on[简写@]

3. 组件通信方式3：全局事件总线

   1. 使用场景：万能
   2. 使用提示：$bus、组件实例的原型的原型指向的Vue.prototype

4. 组件通信方式4：消息订阅与发布

   1. 使用场景：万能
      • 在vue中基本不用，在react中常用
   2. 使用提示：pubsub-js插件

5. 组件通信方式5：仓库

   1. 使用场景：万能
   2. 使用提示：vuex{state、mutations、actions、getter、modules}
   3. tip：数据非持久化

6. 组件通信方式6：插槽

   1. 使用场景：父组件→子组件【结构】
   2. 使用提示：slot
      • 默认插槽
      • 具名插槽
      • 作用域插槽:子组件的数据来源于父组件，但是子组件的自己的结构有父亲决定。

7. v-model实现组件通信

   1. 基本使用：

      • v-model：指令，可以收集表单数据【text、radio、checkbox、range】等等
        切记：v-model收集checkbox需要用数组收集

   2. v-model实现原理： :value @input

   3. 使用场景：父子数据同步

   4. 使用实例：

      <!--CustomInput.vue-->
      <template>
         <div style="background:#ccc;height:50px;">
           <h2>input包装组件</h2>
          <!-- :value:动态属性 @input:给原生DOM练定原生DOM事件-->
           <input type="text" value="value" @input="Semit('input',$event.target.value)">
          </div>
      </template>
      <script type="text/ecmascript-6">
         export default {
            name:'CustomInput',
            props:['value']
      }
      </script>
      <!--ModelTest.vue-->
      <template>
         <div>
             <h2>深入v-mode1k/h2>
             <input type="text"v-model="msg">
             <span>{
            {msg}}</span>
             <br>
             <hr/>
             <h2>v-model实现原理(vue2)</h2>
             <!-- 原生DoM当中是有oninput:事件，它经常结合表单元素一起使用，当表单元素文本内容发生变化的时候就会发出发一次回调
                  vue2:可以通过value.与input事件实现v-model功能-->
             <input type="text" value="msg" @input="msg=$event.target.value"/>
             <span>{
            {msg}}</span>
             <!--深入学习v-model:实现父子组件数据同步（实现父子组件通信）-->
             <hr/>
              <!-- :value?到底是什么？这可是props,父子组件通信
                   @input到底是什么？并非原生DoM的input事件，属于自定义事件-->
             <CustomInput :value="msg" @input="msg=$event"/>
             <CustomInput v-model="msg">
          </div>
      </template>
      <script type="text/ecmascript-6">
         import CustomInput from './CustomInput.vue'
         export default {
             name:'ModelTest',
             components:{
                CustomInput
             },
             data(){
               return {
                  msg:"我爱你塞北的大雪"
                  }
              }
          }
      </script>
      

8. 属性修饰符.sync

   1. 使用场景：父子数据同步

   2. 使用示例：:money.sync,代表父组件给子组件传递props【money】给当前子组件绑定一个自定义事件update:money