vue 之组件

vue组件可扩展html文件，封装重用代码。

1.组件注册

  1.1 局部注册：只能在注册该组件的实例中使用，一处注册，一处使用
   用法示列：

<scritp>
        const  testcom = Vue.extends({
                template: '<div>组件测试1111111111</div>'
        });
    或：
       const testcom from 'testcom.vue';

    export default{
         components:{
                'testcom':testcom,
                'comone':{template:'<div>局部组件</div>' }
          }
    }
</script>   

<template>
        <testcom></testcom>
        <comone></comone>
</template>

    1.2全局注册
<script>
       Vue.component('com',{
            template: '<div>组件测试</div>'
       });
或者：
      const testcom = Vue.extend({
             template: '<div>组件测试1111111111</div>'
       });
       Vue.component('testcom',testcom);
</script>

<template>
        <comone></comone>
        <com></com>
</template>

2、props 数据传递

     父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
     props 传递分为普通传递和动态传递：
     普通传递：父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"。(备注：普通传递的若为数字，传递的选项声明 "prop" 前边需加 ： )
     动态传递：类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件

示列：   

子：  com.vue
      <template>
           <div>
                {{message}}
                {{text}}
                {{num}}
            </div>
      </template>
      <script>
            export default{
                    props:[message, text, num ]
            }
     </script>
父： app.vue
 <template> <div class="h">
            <!-- 静态传递  -->
            <com-demo message="hello vue!"></com-demo>
            <!--  动态传递  -->
           <com-demo :text="text"></ com-demo>
            <!--- 数字传递 -->
            <com-demo :num="123"></ com-demo> 
  </div></template> 

     import comDemo from './com.vue';
    export default{ 
          data(){
                return { text: 'hello mr. magoo' }
         },
        components:{ 'comDemo ':comDemo }

结果：hello vue!  hello mr. magoo  123

Prop 验证：组件可以为 props 指定验证要求。prop 是一个对象而不是字符串数组时，它包含验证要求：

Vue.component('example', {
         props: {
             propA: Number,  // 基础类型检测 （`null` 意思是任何类型都可以）
             propB: [String, Number], // 多种类型
             propC: { type: String, required: true },  // 必传且是字符串
             propD: { type: Number, default: 100 },// 数字，有默认值 
             propE: { type: Object, default: function () { return { message: 'hello' } } },// 数组、对象的默认值应当由一个工厂函数返回
             propF: { validator: function (value) { return value > 10 } } // 自定义验证函数
 }})

type 可以是下面原生构造器：String 、Number、Boolean、Function、Object、Array、type 也可以是一个自定义构造器，使用 instanceof 检测。 

3、自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
        使用 $on(eventName) 监听事件    
        使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

<div id="app"> <div id="counter-event-example">   
         <p>{{ total }}</p>
         <button-counter v-on:increment="incrementTotal"></button-counter>
         <button-counter v-on:increment="incrementTotal"></button-counter>
 </div></div>
<script>
    Vue.component('button-counter', {
        template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
        data: function () {
            return { counter: 0}
        },
        methods: {
            incrementHandler: function () {
                    this.counter += 1;
                    this.$emit('increment');
            }},
        })
//父组件：
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function () {
                this.total += 1
        }}
})</script>