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的属性 可以动态的选择哪个组件
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
- 上一篇:没有了
- 下一篇:没有了