赞
赏
Vue 组件 的出现,就是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。
Vue私有组件还通过对象字面量的形式,定义了一个组件模板对象。
<script type="text/javascript"> // 通过对象字面量的形式,定义了一个组件模板对象 var login = { template: '<h1>通过字面量定义Vue私有组件---嗨客网</h1>' } var vm = new Vue({ el : '#app', components: { //'组件名称':组件的模板对象 'mylogin':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"> <mylogin></mylogin> <p>嗨客网(www.haicoder.net)</p> </div> </body> <script type="text/javascript"> // 通过对象字面量的形式,定义了一个组件模板对象 var login = { template: '<h1>通过字面量定义Vue私有组件---嗨客网</h1>' } var vm = new Vue({ el : '#app', components: { //'组件名称':组件的模板对象 'mylogin':login } }); </script> </html>
浏览器运行效果,如下图所示:
我们首先通过使用对象字面量的形式,定义了一个组件模板对象名为 login,通过 template 关键字来定义模板的内容。
接下来,我们在私有的 components 属性里面,通过 组件名称:组件模板对象 的形式来为组件模板对象定义一个可以引用的名字,即组件名称为 mylogin 组件模板对象为 login。
在页面中,我们可以直接使用组件名称引用该模板对象。
Vue私有组件总结
Vue 组件的出现,就是为了拆分 Vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。
Vue 私有组件还通过对象字面量的形式,定义了一个组件模板对象。