Vue私有组件

Vue私有组件教程

Vue 组件 的出现,就是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。

Vue 私有组件 还通过对象字面量的形式,定义了一个组件模板对象,组件名称和组件模板对象的形式还可以简写。

Vue私有组件详解

语法

<script type="text/javascript"> // 通过对象字面量的形式,定义了一个组件模板对象 var login = { template: '<h1>通过字面量定义Vue私有组件---嗨客网</h1>' } var vm = new Vue({ el : '#app', components: { //组件的模板对象 login } }); </script> </html>

说明

我们首先通过使用对象字面量的形式,定义了一个组件模板对象,通过 template 关键字来定义模板的内容。

接下来,我们在私有的 components 属性里面,通过 组件模板对象 的形式来为组件模板对象定义一个可以引用的名字,此时组件对象的名字和组件模板对象的名字是一致的。

案例

Vue私有组件案例

<!DOCTYPE html> <html> <head> <title>Vue私有组件</title> <script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script> </head> <body> <div id="app"> <login></login> <p>嗨客网(www.haicoder.net)</p> </div> </body> <script type="text/javascript"> // 通过对象字面量的形式,定义了一个组件模板对象 var login = { template: '<h1>通过字面量定义Vue私有组件,简写形式---嗨客网</h1>' } var vm = new Vue({ el : '#app', components: { //组件的模板对象 login } }); </script> </html>

浏览器运行效果,如下图所示:

09 vue component.png

我们首先通过使用对象字面量的形式,定义了一个组件模板对象名为 login,通过 template 关键字来定义模板的内容。

接下来,我们在私有的 components 属性里面,通过 组件模板对象 的简写形式来为组件模板对象定义一个可以引用的名字,即组件名称为 login 组件模板对象也为 login。

在页面中,我们可以直接使用组件名称引用该模板对象。

Vue私有组件总结

Vue 组件的出现,就是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。

Vue 私有组件还通过对象字面量的形式,定义了一个组件模板对象,组件名称和组件模板对象的形式还可以简写。