Vue.js→初识组件

组件(Component)是 Vue.js 最强大的功能之一。

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

组件分为全局组件和局部组件。

1.1全局组件


全局组件

·vue.extend()创建一个组件构造器,构造器中的template属性用来定义组件要渲染的HTML。

·vue.component()注册组件,里面需要提供2个参数:组件的标签和组件构造器。vue.component()内部会调用组件构造器,创建一个组件实例。

因为组件是可复用的Vue实例,所以它们也能接收data、computed、watch、methods以及生命周期钩子等选项。

注意:组件里面的data必须是一个函数,该函数返回一个对象。

1.2局部组件

调用vue.component()注册组件时,组件的注册是全局的,这意味该组件可以在任意Vue实例下使用。如果不需要全局注册,就可以使用局部组件注册,在vue实例中使用component属性实现局部组件注册。

局部组件

上面的例子,直接在Vue实例中使用component属性创建了一个局部组件。我们以后会更多的使用局部组件,而不是全局组件。

1.3组件模块

组件模块

上面例子是一个比较标准的一个组件模块。我们习惯把template单独写在HTML标签中,调用id来渲染组件内容。

以上是一个学习不久vue.js的小白总结的一些组件的例子,希望对大家能有点帮助,我也会在以后学习更多,慢慢补充,和大家一起共同进步。oh,yeah!

你可能感兴趣的:(Vue.js→初识组件)