Vue.component (組件名稱,組件對(duì)象) 這一步叫做注冊(cè)組件
全局注冊(cè)組件后,就可以在整個(gè)應(yīng)用中使用這個(gè)組件
注冊(cè)全局組件
創(chuàng)建組件的方法:
- 第一種方式
全局注冊(cè)一個(gè)組件Vue.component(組件名稱,組件對(duì)象),全局注冊(cè)后,就可以在整個(gè)應(yīng)用中使用這個(gè)組件,使用方式是在body里面<my-component></my-component>
var myComponent = Vue.extend({
template : "<h1>第一個(gè) Vue 組件</h1>"
});
Vue.component("my-component",myComponent);
- 第二種方式:直接寫 ,簡(jiǎn)化,使用方式,也是在body里面寫一個(gè)標(biāo)簽
<my-component2></my-component2>,
vue.component ("my-component2",{
template :"<h1>第二個(gè) Vue 組件</h1>"
})
這種方式創(chuàng)建的是全局組件,接下來的方式是創(chuàng)建局部組件.配置子組件
局部組件注冊(cè)
- 類似
methods配置項(xiàng)的方式,配置子組件
var vm = new Vue ({
el : "#box", //指定掛載元素
data : {
msg : "this is father's msg",
},
components : {//配置子組件
"my-component3" : {
template : "<h1>第三個(gè) Vue 組件</h1>",
},
},
})
- 第四種方式:先聲明一個(gè)模板對(duì)象,
var m4 = {
template: "<h1>第4個(gè)組件</h1>"
}
在Vue實(shí)例 的 組件配置里面 ,寫一個(gè)鍵值對(duì)
var vm = new Vue ({
el : "#box", //指定掛載元素
data : {
},
components : {
"my-component4" : m4,// 把變量賦值給 組件4
}
})
以上就是第四種組件的聲明方式
父向子傳遞值
注意:
1, vue的子集無法直接訪問到父集的屬性和變量,這是單項(xiàng)綁定,在Vue 中,組件的作用域,默認(rèn)是隔離的,如果,子組件想訪問到父集的數(shù)據(jù),則需要父集顯示的向下傳遞,如何顯示的向下傳遞呢? 用props
props 可以是數(shù)組形式接收屬性,也可以是對(duì)象形式,,對(duì)象類型的也可以自定義驗(yàn)證,用validator
<div id="box">
<my-component4 :msg="msg"
:a="age"
:b="price"
:i="isShow"></my-component4>父向子傳值
<!--v-bind:msg 普通傳遞傳遞的是一個(gè)字符串,用v-bind:綁定一下 對(duì)應(yīng)的將會(huì)是一個(gè)變量-->
</div>
</body>
<script src="vue2.0.js"></script>
<script>
var m4 = Vue.extend({
template : `
<div>
<h1>第四個(gè) Vue 組件</h1>
<h1>{{ msg }}</h1>
<h1>{{ a }}-{{ i }}-{{ b }}</h1>
</div>
`,//在template后面補(bǔ)一個(gè)配置項(xiàng)
// props : ["msg","a","is"],//數(shù)組模式 //通過props達(dá)到父組件向子集傳值的目的
props : {//對(duì)象模式
msg : null,
// msg : String,
// a : Number,
a : {
type : Number,
required : true,//必須傳入
},
b : {
validator : function(val){
return val>10;
}
},
i : Boolean,
}
})
var vm = new Vue ({
el : "#box", //指定掛載元素
data : {
msg : "this is father's msg",
age : 7,
isShow : true,
price : 11,
},
components : {//配置子組件
"my-component4" : m4,// 把變量賦值給 組件4
}
})
</script>
子向父?jìng)鬟f值
綁定事件,發(fā)送$emit 事件
<div id="box">
{{ num }}--{{ msg }}
<my-component @pfun="fun"></my-component>
</div>
</body>
<script src="vue2.0.js"></script>
<script>
var vm = new Vue({
el : "#box",
data : {
msg: "hell china!!!",
num : 0,
},
components : {
"my-component" : {
template : `
<div>
<h1> 組件</h1>
<button @click='cfun'>呼喚父</button>
</div>
`,
data : function(){
return {
num : 0,
}
},
methods : {
cfun : function(){
console.log("子準(zhǔn)備呼喊");
this.$emit("pfun",1000);
}
},
computed : {},
},
"other-component" : {}
},
methods : {
fun : function(money){
console.log("收到來自子的呼喚",money);
this.num = money;
},
}
})
</script>
---------------------分割線-------------------------------
data數(shù)據(jù)聲明和 $refs 和 ref
組件內(nèi)部的data ,必須是一個(gè)function,并且function必須返回一個(gè)val
- 為了解決地址傳遞的問題,在組件中聲明 data 必須為函數(shù)
- 在組件中聲明data.必須是一個(gè)函數(shù),堆棧圖,data是一個(gè)地址,指向了一個(gè)倉(cāng)庫(kù),
- 如果需要獲取 DOM 元素,可將元素以
ref='name'進(jìn)行標(biāo)識(shí)
可以通過this.$refs.name得到對(duì)應(yīng) name 的 DOM元素, 少用,
<script>
var d = { num :0 };
var vm = new Vue({
el : "#box",
data : {
msg : "Hello Vue!!!",
num : 0,
},
components : {
"my-component" : {
template : `
<div>
<h1 @click="say">子組件</h1>
{{ num }}
<button @click="num=num+1">{{ num }}</button>
<input type='text' value='123' ref='mi'/>
</div>
`,
data : function(){
//引用類型 js數(shù)據(jù)類型,基礎(chǔ)數(shù)據(jù)類型,引用數(shù)據(jù)類型,地址引用,不是值傳遞
//且返回一個(gè)新對(duì)象,這樣每一個(gè)組件用到的 data 是一塊新的內(nèi)存地址 組件中互不影響.
return {
num : 0
}
},
// data : function(){
// return d;
// },
methods : {
say : function(){
//如果需要獲取 DOM 元素,可將元素以 ref='name' 進(jìn)行標(biāo)識(shí)
//可以通過 this.$refs.name 得到對(duì)應(yīng) name 的 DOM 少用,
this.$refs.mi.focus();
console.log("hello china",this.num)
}
}
},
},
methods : {},
computed : {},
})
</script>
componnet 可以作為一個(gè)vue使用,他是一個(gè)完整的組件,可以有data,也可以有methods.computed,
全局vue 中,也可以有這些.
在使用組件的時(shí)候,
$emit () this.$emit()觸發(fā)什么事件,在jquery中,用trigger 去觸發(fā)自定義事件,
在Vue中,用 $emit() 去觸發(fā)自定義事件,
動(dòng)態(tài)組件
組件可以根據(jù)動(dòng)態(tài)組件的切換渲染頁(yè)面
在body里面寫一個(gè)標(biāo)簽 <componnet></component>
給標(biāo)簽綁定一個(gè)屬性,<componnet :is=""></component> 這個(gè)屬性是固定的,就是 :is 這就是綁定動(dòng)態(tài)屬性
綁定一個(gè) currentView <componnet :is="currentView"></component> 然后可以通過切換,@click="currentView=''home""或者""cart""或者"mine切換頁(yè)面"
angular 用ui-view ,vue用 currentView
is所綁定的值,必須在component 被注冊(cè)
插槽
slot
mine 想套小組件的時(shí)候,要使用插槽,使用方法
插槽其實(shí)也叫內(nèi)容分發(fā),
具名插槽,含有 name 屬性的 slot 標(biāo)簽,
在組件渲染模板時(shí),會(huì)拋棄標(biāo)簽內(nèi)的原始內(nèi)容,為了保留原始內(nèi)容,
可以在模板內(nèi)通過slot 標(biāo)簽預(yù)留插槽位
原始內(nèi)容,(不含 slot 屬性的) 會(huì)默認(rèn)放到匿名插槽內(nèi)
含有 slot 屬性的,會(huì)去查找對(duì)應(yīng)的插槽,未找到,將拋棄內(nèi)容,
<div id="box">
<my-main>
<!--組件在渲染的時(shí)候會(huì)丟掉所有的原始內(nèi)容-->
<my-header slot="h"></my-header>
<p>這是原始的p 無指定插槽 匿名插槽 具名插槽
</p>
<my-footer slot="f"></my-footer>
</my-main>
</div>
</body>
<script src="vue2.0.js"></script>
<script>
//動(dòng)態(tài)組件
var vm = new Vue({
el : "#box",
data : {
},
components : {
"my-header" : {
template : `<h1>this is header</h1>`,
},
"my-footer" : {
template : `<h1>這是footer</h1>`,
},
"my-main" : {
template : `
<div>
<slot name = 'h'></slot>
<h1>this is main</h1>
<slot></slot>
<slot name = 'f'></slot>
</div>
`,
},
},
methods : {},
computed : {},
})
</script>
組件渲染的時(shí)候會(huì)丟棄組件內(nèi)部的原始內(nèi)容,
