vue 之组件

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

1.组件注册

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

        const  testcom = Vue.extends({
                template: '

组件测试1111111111

'
        });
    或：
       const testcom from 'testcom.vue';

    export default{
         components:{
                'testcom':testcom,
                'comone':{template:'

局部组件

' }
          }
    }
   

    1.2全局注册

2、props 数据传递

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

示列：   

子：  com.vue
     
     
父： app.vue
  

     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 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

   
         

{{ total }}