入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

Vue2.0 Component的详解(重点)

创建时间:2017-08-03 投稿人: 浏览次数:15728
<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。
  • 上一篇:没有了
  • 下一篇:没有了
未上传头像