vue.js中怎样注册组件
小编给大家分享一下vue.js中怎样注册组件,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
vue.js中注册组件的方法:1、使用extend,代码为【var com1 = Vue.extend({template:'<h4>这是第一种方式</h4>'})】;2、在页面上定义外部template元素。
vue.js中注册组件的方法:
第一种方式 extend:
vue.js中这样写:
var com1 = Vue.extend({ template:'<h4>这是第一种方式</h4>' }); Vue.component("myCom1",com1);
注:myCom1是采用的驼峰命名方式,所以html中这样写:
<my-com1></my-com1>
注:如果不采用驼峰命名方式,js和html中这样写:
vue.js中这样写:
var com1 = Vue.extend({ template:'<h4>这是第一种方式</h4>' }); Vue.component("mycom1",com1);
html中写法:
<mycom1></mycom1>
上面可以不使用中间变量,即把com1的内容直接写在Vue.component(“mycom1”,com1)里面,如:
Vue.component("mycom1",Vue.extend({ template:'<h4>这是第一种方式</h4>' }));
第二种方式:不用extend
vue.js中这样写:
Vue.component("mycom1",{ template:'<div><h4>这是h4标签</h4><span>这是span标签</span></div>' });
注:不论是哪种方式创建出来的组件,必须只有一个根元素,即多个html元素的时候,要用一个div包裹
html中依旧写成:
<mycom1></mycom1>
第三种:在页面上定义外部template元素
vue.js中这样写:
Vue.component("mycom1",{ template:'#temp' });
html中写template结构:
<template id="temp"> <h4>这是html中的temp</h4> </template>
PS:以上是全局注册,局部注册如下:
第一种局部注册:
js文件中写:
var vm = new Vue({ el:"#newBrand", data:{}, components:{ mycom1:{ template: '<div><h4>这是局部template</h4></div>' } } });
html文件中写:
<div id="newBrand"> <mycom1></mycom1> </div>
第二种局部注册:
js文件中这样写:
var vm = new Vue({ el:"#newBrand", data:{}, components:{ mycom1:{ template: '#temp' } } });
html文件中写法:
<template id="temp"> <div><h4>这是局部template啦</h4></div> </template>
看完了这篇文章,相信你对vue.js中怎样注册组件有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!