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