vue 基础知识积累

一、全局API

1. Vue.extend():基础的vue构造器，创造一个 vue对象子类，参数是一个包含组件选项的对象。（template, vue属性， style）

   注意：

   • 仅有的例外是像 el 这样根实例特有的选项。

   • 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

     data: function () {
       return {
         count: 0
       }
     }
     

     why: 因为对象时引用类型 ，函数有自己独立的作用域。 组件可能会被多个实例同时引用，这将会导致多个实例共享同一个对象。

2. Vue.component ()： 注册一个vue组件 全局 （Key：组件名称， vue构造器对象）

   // 定义组件：
   // 定义一个名为 button-counter 的新组件
   Vue.component('button-counter', {
     data: function () {
       return {
         count: 0
       }
     },
     template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
   })
   ----------------------------------
   //使用组件：
   <div id="demo">
     <button-counter></button-counter>
   </div>
   ---------------------------
   //vue根实例中挂在自定义组件
   <div id="components-demo">
     <button-counter></button-counter>
   </div>
   
   new Vue({ el: '#components-demo' })
   

   全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

   全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

   组件注册

3. 局部注册：

   • vue全局注册是存在不完美的 ，因为全局注册 ，若是组件此时注册了 ，但是一段时间后业务调整导致组件不再被使用，但是构建时依旧会存在。造成了用户下载JavaScript代码增加。

   • 解决办法： 在一个js文件中定义组件， 然后然后在 components 选项中定义你想要使用的组件：

     // js文件
     var ComponentA = { /* ... */ }
     var ComponentB = { /* ... */ }
     var ComponentC = { /* ... */ }
     
     
     //组件引用：
     new Vue({
       el: '#app',
       components: {
         'component-a': ComponentA,
         'component-b': ComponentB
       }
     })
     
     //ES2015 模块 写法声明
     
       components: {
         ComponentA
       }, 
           这种写法相当于 ComponentA: ComponentA
           
      即这个变量名同时是
      用在模板中的自定义元素的名称
     包含了这个组件选项的变量名
     

     编码风格建议： 组件集中放置 ，然后通过 Babel 和 webpack 的模块系统 进行引用

     import ComponentA from './ComponentA'
     import ComponentC from './ComponentC'
     
     export default {
       components: {
         ComponentA,
         ComponentC
       },
       // 这个我不想写 ，但加深一次印象吧， 模块化，组件化确实风格清晰，利于维护
     }
     

     vue3使用了一个小技巧 ，是的全局注册基础组件，这个感觉vue2也可以实现 ，不难

4. vue.emit (enventName, […args]) 触发当前实例上的事件，可以用作通信。附加参数都会传给监听器回调。 子触发事件 ，夫监听，并执行。

   1. 可以通过$event访问这个args的值，但我没试过 ，感觉这样不方便，一般都会通过事件处理函数来解决这个问题。

   2. 实现方式 通过v-on：绑定监听器

   // 创造子组件，并定义
   Vue.component('welcome-button', {
     template: `
       <button v-on:click="$emit('welcome')">
         Click me to be welcomed
       </button>
     `
   })
   
   //父子组件
   <div id="emit-example-simple">
     <welcome-button v-on:welcome="sayHi"></welcome-button>
   </div>
   
   new Vue({
     el: '#emit-example-simple',
     methods: {
       sayHi: function () {
         alert('Hi!')
       }
     }
   })
   

二. 组件间数据的传递

1. Prop向子组件传递数据（）