vue组件

1.注册组件

  1.1 全局注册

Vue.component(tagName, options)

e.g. 

Vue.component("tag", {
    template: '<div>hello component!</div>',
    props:{
        
    }
})

组件在注册之后,便可以作为自定义元素 <my-component></my-component> 在一个实例的模板中使用

注意确保在初始化根实例之前注册组件

注意:组件必须在vue实例中才能使用。

  1.2 局部注册

2.data必须是函数

3.组件组合

 组件设计初衷就是要配合使用的,最常见的就是形成父子组件的关系:组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。然而,通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解,从而提高了其可维护性和复用性。

 

  3.1 父子组件通信

子组件可使用props和父组件做数据同步:将模板中的属性和父组件的data做数据绑定【v-bind】,在模板中使用props的值,这样就可以间接的使得父子组件进行通信。

使用了v-bind的属性 会当成JavaScript代码进行解析。例如:

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

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

 

->>

属性【props】也可以定义为对象形式,主要用来做数据验证:

props:{

  name:String,

  age:{

    type:Number,

    default:100 | function(){ return 200; },

    required:true

  }...

}

 type 可以是下面原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array
  • Symbol

当 prop 验证失败,Vue 会抛出警告 (如果使用的是开发版本)。注意 prop 会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 datacomputed 或 methods 等实例属性还无法使用。

   3.2 非prop特性

添加特性,也可以给元素添加其他属性【class,id,name等】

 

 4.自定义事件

 、

猜你喜欢

转载自www.cnblogs.com/zhuxiang1633/p/8964404.html