Vue2.0 Component的详解(重点)
<div id="app">
<lhq></lhq>
</div>Vue.component("lhq",{
template: "<p>我是一个全局的lhq组件</p>"
})
上述的虽然是全局的一个组件,能在多个vue作用域里面使用,但是必须在vue作用域里面,记住一定得在vue作用域里!!!
var app = new Vue({
el : "#app",
components : {
"lhq": {
template:"<p>我是局部的一个组件<p>"
}
}
})和全局的组件不同的是,component是加s的,因为不一定只有一个局部组件,可能有很多,还有这里的组件只能在它制定的作用域里面使用
<div id="app">
<lhq :here="country"></lhq>
</div>
var app = new Vue({
el : "#app",
data:{
country: "非洲"
},
components : {
"lhq": {
template:"<p>我是来自{{here}}局部的一个组件<p>",
props: ["here"]
}
}
})
props的值是一个数组,代表的意思是获取和设置标签上的属性值
如果组件的标签属性是一个aaa-bbb的格式,那么在props里面加的时候就要注意了,一定得按照驼峰命名法来填,props:["aaaBbb"]
<div id="app"> <wcy></wcy> </div>
var store = {
template : `<p style="color:green">我是一个绿色的商店,我的爸爸是herecomponent<p>`
}
var hereComponent = {
template: `
<div>
<p style="color:red">
我是定义在构造器外部的局部组件,我的爸爸是app
</p>
<store></store>
</div>
`,
components: {
"store": store
}
}
var app = new Vue({
el : "#app",
components : {
"wcy" : hereComponent
}
})<div id="app"> <component :is="which"></component> <button type="button" @click="changeComponent">改变组件</button> </div>
var componentA = {
template: `<p>我是组件A</p>`
}
var componentB = {
template: `<p>我是组件B</p>`
}
var componentC = {
template: `<p>我是组件C</p>`
}
var app = new Vue({
el : "#app",
data : {
which : "componentA"
},
components : {
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
},
methods : {
changeComponent : function(){
if(this.which == "componentA"){
this.which = "componentB"
}else if(this.which == "componentB"){
this.which = "componentC"
}else {
this.which = "componentA"
}
}
}
})
这里需要注意的v-bind:is这个component的属性 可以动态的选择哪个组件
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。
- 上一篇: MVC和MVVM详解
- 下一篇: Java中字符串的连接
