vue2.0-组件-文档理解笔记v1.0

组件

• 组件可以扩展 HTML 元素，封装可重用的代码

• 在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能

• 在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

使用组件

注册一个全局组件

<div id="example">

  <my-component>my-component>
div>

// 注册全局组件,指定之前设定的元素名,然后传入对象
Vue.component('my-component', {
  template: '
A custom component!
'
})
// 创建根实例
new Vue({
  el: '#example'
})

局部注册组件

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用

//将传入给组件的对象单独写
var Child = {
  template: '
A custom component!
'
}
new Vue({
  //通过components语法创建局部组件
  //将组件仅仅放在这个vue实例里面使用
  components: {
    //  将只在父模板可用
    'my-component': Child
  }
})

DOM模板解析说明

当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，

因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素

，
， ， 限制了能被它包裹的元素， 只能出现在其它元素内部。

<table>
  <my-row>...my-row>
table>

<table>
  <tr is="my-row">tr>
table>

data必须是函数

使用组件时，大多数可以传入到 Vue 构造器中的选项可以在注册组件时使用，有一个例外： data 必须是函数。 实际上

//这样会报错,提示data必须是一个函数
Vue.component('my-component', {
  template: '{{ message }}',
  data: {
    message: 'hello'
  }
})

<div id="example-2">
  <simple-counter>simple-counter>
  <simple-counter>simple-counter>
  <simple-counter>simple-counter>
div>

var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '{{ counter }}',
  // data 是一个函数，因此 Vue 不会警告，
  // 但是我们为每一个组件返回了同一个对象引用,所以改变其中一个会把其他都改变了
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

避免出现同时改变数据的情况

//返回一个新的对象,而不是返回同一个data对象引用
data: function () {
  return { //字面量写法会创建新对象
    counter: 0
  }
}

构成组件

组件意味着协同工作，通常父子组件会是这样的关系：

• 组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信

• 父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件

然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。
父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。


prop

使用prop传递数据

• 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。

• 使用 props 把数据传给子组件。

• prop 是父组件用来传递数据的一个自定义属性

• 子组件需要显式地用 props 选项声明 “prop”

<div id="example-2">
    
    <child message="hello!">child>
div>

    Vue.component('child', {
        // 声明 props,用数组形式的对象
        props: ['message'],
        // 就像 data 一样，prop 可以用在模板内
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '{{ message }}'
    });
    new Vue({
        el: '#example-2'
    })

动态prop

用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件

<div id="example-2">

    <input v-model="parentMsg">
    <br>
    
    
    <child v-bind:my-message="parentMsg">child>
div>

    Vue.component('child', {
        // 声明 props
        props: ['my-message'], 
        template: '{{ myMessage }}' //如果写my-message会报错,需要转换为驼峰写法
    });
    new Vue({
        el: '#example-2',
        data: {
            parentMsg: ''
        }
    })

短横线和驼峰写法

HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）

• 在JavaScript里面使用驼峰写法,但是在html里面需要转成短横线写法

• 反之亦然,vue会自动处理来自html的短横线写法转为驼峰写法

字面量语法和动态语法

<comp some-prop="1">comp>


<comp v-bind:some-prop="1">comp>

单向数据流

• prop 是单向绑定的

• 当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

• 每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。

通常有两种改变 prop 的情况：

1. prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用

定义一个局部 data 属性，并将 prop 的初始值作为局部数据的初始值。

<div id="example-2">

    <child initial-counter="10">child>
div>

    Vue.component('child', {
        props: ['initialCounter'],//这里用驼峰写法
        data: function () { //转为一个局部变量,写一个data对象给组件使用
            return {counter: this.initialCounter}
        },
        template: '{{ counter }}'
    });
    new Vue({
        el: '#example-2'
    })

1. prop 作为需要被转变的原始值传入。

定义一个 computed 属性，此属性从 prop 的值计算得出。

//例子没有写完,但是根据第一个例子可以知道利用computed的手法原理其实跟写一个data差不多
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}    

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

prop验证

组件可以为 props 指定验证要求,当组件给其他人使用时这很有用。

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    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
      }
    }
  }
})

自定义事件

每个 Vue 实例都实现了事件接口(Events interface)

• 使用 $on(eventName) 监听事件

• 使用 $emit(eventName) 触发事件

• 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<div id="counter-event-example">
    <p>{{ total }}p>
    
    <button-counter v-on:increment1="incrementTotal">button-counter>
    
    <button-counter v-on:increment1="incrementTotal">button-counter>
div>

    Vue.component('button-counter', {
        //监听click事件,处理程序为increment(子组件定义的方法)
        template: '{{ counter }}',
        //每一个counter都是独立的对象属性
        data: function () {
            return {
                counter: 0
            }
        },
        //子组件的方法
        methods: {
            increment: function () {
                this.counter += 1;
                //在子组件里面直接触发之前监听的increment1事件来执行父组件的方法
                this.$emit('increment1');
            }
        },
    })
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 0
        },
        //父组件的方法
        methods: {
            incrementTotal: function () {
                this.total += 1
            }
        }
    })

1.组件之间因为作用域不同的关系,所以相互独立,所以子组件想要使用父组件的方法的话需要做一个新的监听映射

给组件绑定原生事件

<my-component v-on:click.native="doTheThing">my-component>

使用自定义事件的表单输入组件

自定义事件也可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。所以要让组件的 v-model 生效，它必须：

• 接受一个 value 属性

• 在有新的 value 时触发 input 事件

<input v-model="something">



<input v-bind:value="something" v-on:input="something = $event.target.value">

一个非常简单的货币输入：

<currency-input v-model="price">currency-input>

Vue.component('currency-input', {
  template: '\
    \
      $\
      \
    \
  ',
  props: ['value'], //父组件将绑定的value传给子组件
  methods: {
    // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
    updateValue: function (value) {
      var formattedValue = value //对值进行处理
        // 删除两侧的空格符
        .trim()
        // 保留 2 小数位和2位数
        .slice(0, value.indexOf('.') + 3)
      // 如果值不统一，手动覆盖以保持一致,为了保持输入框显示内容跟格式化内容一致
      if (formattedValue !== value) {
      //因为注册是一个input元素,所以this.$refs 就是input元素
        this.$refs.input.value = formattedValue
      }
      //手动触发input事件,将格式化后的值传过去,这是最终显示输入框的输出
      this.$emit('input', Number(formattedValue))
    }
  }
})
//实例化vue实例的
new Vue({
        el: '#aa', //要绑定一个vue实例,例如包裹一个id为aa的div
        data:{
            price:'' //v-model要有数据源
        }
    })

ref 被用来给元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例 ref

这是一个比较完整的例子:

<div id="app">

  <currency-input 
    label="Price" 
    v-model="price"
  >currency-input>
  <currency-input 
    label="Shipping" 
    v-model="shipping"
  >currency-input>
  <currency-input 
    label="Handling" 
    v-model="handling"
  >currency-input>
  <currency-input 
    label="Discount" 
    v-model="discount"
  >currency-input>
  
  <p>Total: ${{ total }}p>
div>

Vue.component('currency-input', {
  template: '\
    
\
      {{ label }}\
      $\
      \
    
\
  ',
  props: {  //多个prop传递,因为prop是对象,只要是对象格式就行
    value: {
      type: Number,
      default: 0
    },
    label: {
      type: String,
      default: ''
    }
  },
  mounted: function () { //这是vue的过渡状态,暂时忽略不影响理解
    this.formatValue()
  },
  methods: {
    updateValue: function (value) {
      var result = currencyValidator.parse(value, this.value)
      if (result.warning) {
      // 这里也使用了$refs获取引用注册信息
        this.$refs.input.value = result.value
      }
      this.$emit('input', result.value)
    },
    formatValue: function () {
      this.$refs.input.value = currencyValidator.format(this.value) //这里注意下,这个this是prop传递过来的,也相当于这个组件作用域
    },
    selectAll: function (event) { //event可以获取原生的js事件
      // Workaround for Safari bug
      // http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
      setTimeout(function () {
          event.target.select()
      }, 0)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    price: 0,
    shipping: 0,
    handling: 0,
    discount: 0
  },
  computed: {
    total: function () {
      return ((
        this.price * 100 + 
        this.shipping * 100 + 
        this.handling * 100 - 
        this.discount * 100
      ) / 100).toFixed(2)
    }
  }
})

非父子组件通信

在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

/*
通过on来监听子组件的事件来实现传递
*/

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

使用Slot分发内容

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)

编译作用域

组件作用域简单地说是：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。假定 someChildProperty 是子组件的属性，上例不会如预期那样工作。父组件模板不应该知道子组件的状态。

<child-component v-show="someChildProperty">child-component>

如果要绑定子组件内的指令到一个组件的根节点，应当在它的模板内这么做：

Vue.component('child-component', {
  // 有效，因为是在正确的作用域内
  template: '
Child
',
  data: function () {
    return { //因为这个属性在当前组件内编译(创建了)
      someChildProperty: true
    }
  }
})

类似地，分发内容是在父组件作用域内编译。

单个Slot

• 除非子组件模板包含至少一个 插口，否则父组件的内容将会被丢弃。

• 当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。

• 备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

<div id="aa">
    <h1>我是父组件的标题h1>
    
    <my-component>my-component>
    <my-component>
        <p>这是一些初始内容p>
        <p>这是更多的初始内容p>
    my-component>
div>

    Vue.component('my-component', { 
    //my-component 组件有下面模板
        template: '\
            
\
                
我是子组件的标题
 \
                 \  //有slot插口,所以没有被父组件丢弃
                只有在没有要分发的内容时才会显示。\
                 \
            
 \
        '
    })
    new Vue({
        el: '#aa',
    })

渲染结果：

<div id="aa"><h1>我是父组件的标题h1>
    <div>
        <h2>我是子组件的标题h2>
        
        只有在没有要分发的内容时才会显示。
    div>
    <div>
        <h2>我是子组件的标题h2>
        <p>这是一些初始内容p>
        <p>这是更多的初始内容p>
    div>
div>

有名字的Slot

• 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

• 仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。

<div id="aa">
    <app-layout>
        
        <h1 slot="header">这里可能是一个页面标题h1>
        <p>主要内容的一个段落。p>
        <p>另一个主要段落。p>
        
        <p slot="footer">这里有一些联系信息p>
    app-layout>
div>

    Vue.component('app-layout', {
        template: '\
            
 \
                
 \  //找到名字叫header的slot之后替换内容,这里替换的是整个DOM
                     \
                
 \
                
 \ //因为slot没有属性,会将内容插入到slot的所在的DOM位置
                     \
                
 \
                
\  //跟header类似
                     \
                
 \
            
 \
        '
    });
    new Vue({
        el: '#aa',
    })

渲染结果为:

<div class="container">
  <header>
    <h1>这里可能是一个页面标题h1>
  header>
  <main>
    <p>主要内容的一个段落。p>
    <p>另一个主要段落。p>
  main>
  <footer>
    <p>这里有一些联系信息p>
  footer>
div>

作用域插槽(vue2.1)

• 作用域插槽是一种特殊类型的插槽，用作使用一个（能够传递数据到）可重用模板替换已渲染元素。

• 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样

• 在父级中，具有特殊属性 scope 的