vue组件

  • 组件是自定义的HTML元素
  • 组件扩展了HTML元素，封装了可重用的HTML代码
组件的使用
  • 创建组件构造器
    • Vue.extend(config:object)
    • config参数 template:"<div>组件模板</div>"
    • 创建组件构造器，而不上一个具体的组件实例，template表示要渲染成的结构
  • 注册组件
    • Vue.component()
    • Vue.component("my-component",组件构造器)
    • 这里才是创建一个组件的实例
    • 组件的注册是全局的
    • 局部注册用选项对象的components属性
    • vue提供了语法糖，可以直接创建和注册Vue组件---Vue.component('my-component',{template:"<div>渲染后的html结构</div>"})
    • 当然使用局部注册方法同样可以 components:{'my-component':{template:"<div>...</div>"}}
  • 使用组件
    • <my-component></my-component>
    • 在html中要求标签正确的闭合，在.vue中可以单标签
  • 组件就是对自定义的标签，先创建组件构造器，也是对Vue对象的扩展，构造器参数中的template就是组件渲染后的html结构，利用Vue.components进行注册，注册后才可以使用，然后new Vue(...)创建Vue实例，在Vue实例下可以使用注册的组件
    • 父子组件
      • 一个组件也就是一个Vue实例，多数Vue选项都可以在Vue.extend()中使用
      • 子组件注册在父组件中，子组件在父组件的template中使用
  • 分离template选项，不再把字符串写在js代码中
    • 方法 1 使用script标签，修改type属性为"text/x-template",添加id，使用时template:"#模板id"
    • 方法 2 使用<template id="tpl">组件
  • 父组件向子组件传值 使用props选项 这里是在子组件中使用props
components:{
  "my-component":{
    template:"<div>{{myname}}</div>",
    //在这里使用props选项可以把父组件的值传递到子组件中，
    //当然模板中也可以是data中的值，但data中的不能和父组件通信
    props:['myname']
  }
}
  • 组件作用域
    • template属性使用<template></template>标签，h5的新标签，IE不支持
    • 组件是有作用域的，组件的模板也是在作用域中编译的，这个作用域就是tempalte标签内的区域
    • 父组件的数据只能在父组件的模板（作用域）内使用，子组件的数据只能在子组件的模板（作用域）内使用，如果父组件的数据要在子组件中使用，应该用props传递数据
  • slot
  • 自定义事件系统
    • 独立于原生的dom事件
    • 分为
      • $on()监听事件
      • $emit()触发事件
      • $dispatch()派发事件，向上冒泡
      • $broadcast向下广播事件
    • 2.x取消了events选项，需要我们在created钩子中使用$on()来监听事件。

问题

  • 在vue2.4中props的数据流是单项的，也就是说当父组件的属性发生变化时，将传到给子组件，反过来则不会，当你在子组件中操作props中的值时，vue会给予警告。但遇到的问题是，在子组件中操作props传过来的一个数组，不给警告，且操作成功。子组件修改了父组件的数据。
    • 在官方文档中有说明，js中的数组和对象是引用类型的，指向是同一个内存空间的，当你修改子组件会影响父组件。