Vue component初认识

what is component

组件是Vue.js最强大的功能之一.组件可以扩展HTMl元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以 'is' 特性扩展.

how to use

注册全局组件

    Vue.component('kai', {
        template: '
我是全局组件
'
    })
    var app = new Vue({
            el: "#app"
  })

一定要在初始化跟实例(app)之前注册组件,否则无效
注册完之后就可以在dom中跟html元素的使用方式一样的使用

注册局部组件

  var app = new Vue({
          el: "#app",
          components: {
              "localCom": {
                  template: "
我系局部组件
"
                  }
          }
      })

• 通过使用组件实例选项(components)注册可以是组件仅在另一个实例/组件的作用域中可用
• 上边注册的组件 'localCom' 使用驼峰式命名,在使用时 要在每一个驼峰处使用 '-' 隔开
  使用方式:

is特性

由于Vue只有在浏览器解析和标准化HTML后才能获取模板内容.比如

中只可以直接包裹
• 所以当你像下边这样使用组件

  浏览器会在Vue解析模板之前,标准化HTML,就会导致一些问题
  变通的方案是使用特殊的 is 属性:

  data 必须是函数

  在自定义组件中data选项必须是函数,其实不难理解,如果你像Vue跟实例那样,在自定义组件中也直接使用对象的形式,那么如果这个组件被多个地方使用,而data是一个对象,在内存中就是同一个内存空间,那如果在某一个地方修改data中的内容,那其他的地方的组件数据也会一起改变,显然是不合理的,所以data要是一个函数,然后返回一个对象.

      Vue.component("my-component", {
              template: "{{message}}"  
              data:  function () {
                      return {
                            message: "我是自定义全局组件"
                      }
              }
          }
    )
  

  组件间通讯

  在Vue中,父子组件的关系可以总结为 props down, events up, 父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息.看下图

  

  image.png

  1. 父 -> 子

  组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接 引用父组件的数据.要让子组件使用粗组件的数据,我们需要这样做:

  
          
  
              
              
            
  
          Vue.component('kai', {
              template: '
  我是全局组件{{msg}}
  ',
              props: ["msg"]
          });
  

  • HTMl特性是不区分大小写的,所以当使用的不是字符串模板, 驼峰式命名的 prop 需要转换为相对应的 短横线隔开式命名

  2.动态绑定props

  • 这样,父组件你的time只要变化,子组件的timer也会动态的跟着改变

  3.还可以直接传递一个对象,写法如下

  • 还是要在props显示地写出要接收的属性的名称,直接使用 v-bind="obj"

  4.单向数据流

  prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。
  如果需要修改使用下面两种方式:
  1. 定义一个局部变量，并用 prop 的值初始化它：

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

  2. 定义一个计算属性，处理 prop 的值并返回。

     props: ['size'],
     computed: {
       normalizedSize: function () {
       return this.size.trim().toLowerCase()
       }
     }
     

  5.非props特性

  • 所谓非prop特性,就是它可以直接传入组件,而不需要定义相应的prop.

  上边这个会直接在bs-date-input的组件内添加一个data-3d-date-picker的值为true不过需要在data返回的对象中声明一个data-3d-date-picker属性,并初始化一个默认值出来

  6.替换/覆盖现有的特性

  • 对于多数特性来说，传递给组件的值会覆盖组件本身设定的值。即例如传递 type="large" 将会覆盖 type="date" 且有可能破坏该组件！所幸我们对待 class 和 style 特性会更聪明一些，这两个特性的值都会做合并操作,生成最终的值.

  子 -> 父

  1. 使用v-on绑定自定义事件

  

  image.png
  1. v-on:aaa 也可简写成 @aaa
  2. 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

  2. 给组件绑定原生事件

  • v-on:click.native 会监听组件所在的根实例的(app)doTheThing事件

  3. sync 实现子父组件数据同步

  

  image.png

  4.其他

  1. 尽管有 props 和 events，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID。|

    
  
      
    
    var parent = new Vue({ el: '#parent' })
    // 访问子组件
    var child = parent.$refs.profile