vue--组件基础

 

组件是可复用的 vue 实例，它与new Vue 接收相同的参数，例如：data、methods、computed、watch 以及生命周期钩子。除了 el 等。

1、组件注册必须有一个组件名。

　　组件名有两种命名方式：base-button 或者 BaseButton。

1、data 必须是一个函数。一个组件的data必须是一个函数。

2、组件注册有两种：局部注册、全局注册。

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

　　比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这

　　造成了用户下载的 JavaScript 的无谓的增加。

　　局部注册：的组件在其子组件中不可用。

3、通过 props 向子组件传递数据。

　　一个组件默认可以拥有任意数量的 props，任意值都可以传递给任何 prop。

    Vue.component('my-button', {
      template: `<button>{{text}}</button>`,
      props: ['title', 'author', 'isTruthiness', 'phone', 'list']
    })
    // props 还可以写成对象，并且都有指定的值类型
    Vue.component('my-button', {
      template: `<button>{{text}}</button>`,
      props: {
        title: String,
        author: Object,
        isTruthiness: Boolean,
        phone: Number,
        list: Array
      }
    })

　　单向数据流，单向下行绑定。

　　① 如果子组件想要改变或者使用父组件传递的props最好是定义一个本地的data，然后将props作为初始值赋值给它。

      props: ['initcounter'],
      data: function() {
        return {
          counter: this.initcounter
        }
      }

　　②这个props以原始值传入，并且需要进行转换，此时最好用这个prop定义一个计算属性。

      props: ['numberlist'],
      computed: {
        targetlist: function() {
          return this.numberlist.sort().reverse();
        }
      }

　　③ props 验证，这在一个可能会被别人用到的组件中是非常有用的。

    Vue.component('my-component', {
      props: {
        propA: String,
        porpB: [String, Number],
        propC: {
          type: String,
          required: true
        },
        propD: {
          type: Number,
          default: 100
        },
        propE: {
          type: Object,
          default: function() {
            return { message: 'world peace' }
          }
        },
        propF: {
          // 自定义校验方法
          validator: function(value) {
            return ['success', 'fail', 'complete'].indexOf(value) !== -1;
          }
        }
      }
    })

 

4、每个组件只能有一个根元素。

5、通过事件向父级组件发送消息。

　　通过 $emit(eventName, params) 向父级发送事件，父级通过 v-on 监听事件来执行。在父级可以通过 $event 来访问被抛出的参数。

6、is="componentA"  就是把这个标签当做这个组件componentA 。解析DOM模板时注意事项。