Vue注册组件的3种方式
第一种方式 extend:vue.js中这样写:var com1 = Vue.extend({template:'<h3>这是第一种方式</h3>'});Vue.component("myCom1",com1);注:myCom1是采用的驼峰命名方式,所以html中这样写:<my-com1></my-com1>注:如果不采用驼...
·
第一种方式 extend:
vue.js中这样写:
var com1 = Vue.extend({
template:'<h3>这是第一种方式</h3>'
});
Vue.component("myCom1",com1);
注:myCom1是采用的驼峰命名方式,所以html中这样写:
<my-com1></my-com1>
注:如果不采用驼峰命名方式,js和html中这样写:
vue.js中这样写:
var com1 = Vue.extend({
template:'<h3>这是第一种方式</h3>'
});
Vue.component("mycom1",com1);
html中写法:
<mycom1></mycom1>
上面可以不使用中间变量,即把com1的内容直接写在Vue.component(“mycom1”,com1)里面,如:
Vue.component("mycom1",Vue.extend({
template:'<h3>这是第一种方式</h3>'
}));
第二种方式:不用extend
vue.js中这样写:
Vue.component("mycom1",{
template:'<div><h3>这是h3标签</h3><span>这是span标签</span></div>'
});
注:不论是哪种方式创建出来的组件,必须只有一个根元素,即多个html元素的时候,要用一个div包裹
html中依旧写成:
<mycom1></mycom1>
第三种:在页面上定义外部template元素
vue.js中这样写:
Vue.component("mycom1",{
template:'#temp'
});
html中写template结构:
<template id="temp">
<h3>这是html中的temp</h3>
</template>
PS:以上是全局注册,局部注册如下:
第一种局部注册:
js文件中写:
var vm = new Vue({
el:"#newBrand",
data:{},
components:{
mycom1:{
template: '<div><h3>这是局部template</h3></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><h3>这是局部template啦</h3></div>
</template>
更多推荐
已为社区贡献3条内容
所有评论(0)