Vue自定義組件:
組件:就是一個大的對象:new Vue({})就是一個組件
定義一個組件:
1.全局組件:
<div id="box">
<aaa></aaa>
</div>
var Aaa=Vue.extend({
template:'<h3>我是一個標題</h3>'
});
Vue.component('aaa',Aaa);
a)給自定義的組件添加數據:
data必須是函數的形式,函數必須返回一個對象(json)
var Aaa=Vue.extend({
data(){ //data必須是函數
return{ //必須return一個對象
msg:'我是一個標題'
};
},
template:'<h3>{{msg}}</h3>'
});
Vue.component('aaa',Aaa);
b)給自定義的組件綁定事件
var Aaa=Vue.extend({
data(){ //data必須是函數
return{ //必須return一個對象
msg:'我是一個標題'
};
},
methods:{ //給自定義的組件綁定事件
change(){
this.msg="change";
}
},
template:'<h3 @click="change">{{msg}}</h3>'
});
Vue.component('aaa',Aaa); //component放在外部
2.局部組件(子組件)
把自定義的組件放到某一個組件內部
<script type="text/javascript">
var Aaa=Vue.extend({
data(){ //data必須是函數
return{ //必須return一個對象
msg:'我是一個標題'
};
},
methods:{ //給自定義的組件添加事件
change(){
this.msg="change";
}
},
template:'<h3 @click="change">{{msg}}</h3>'
});
var vm = new Vue({
el:'#box',
data:{
bsign:true
},
components:{ //components放在根組件vue內部,為局部組件
'aaa':Aaa
}
});
</script>
==============================================
定義組件的另一種編寫方式:
<div id="box">
<my-aaa></my-aaa>
</div>
1）全局組件：
<script type="text/javascript">
Vue.component('my-aaa',{
data(){
return{
msg:'標題1111'
}
},
methods:{
toggle(){
this.msg="change"
}
},
template:'<strong @click="toggle">{{msg}}</strong>'
});
var vm = new Vue({
el:'#box'
});
</script>
2）局部組件：
<script type="text/javascript">
var vm = new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return{
msg:'標題2233'
}
},
methods:{
toggle(){
this.msg="change"
}
},
template:'<strong @click="toggle">{{msg}}</strong>'
}
}
});
</script>
===============================================
配合模板自定義組件:(即template里面的代碼)
1.直接放到template里面
template:'<strong @click="toggle">{{msg}}</strong>'
2.單獨放到某一個地方
a)都放到一個script標簽里面
<script type="x-template" id="aaa">
<strong @click="toggle">{{msg}}</strong>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</script>
<script type="text/javascript">
Vue.component('my-aaa',{
data(){
return{
msg:'標題1111'
}
},
methods:{
toggle(){
this.msg="change"
}
},
template:'#aaa' //寫的是id屬性
});
var vm = new Vue({
el:'#box'
});
</script>
b)放到template標簽里面(*推薦使用)
<template id="aaa">
<strong @click="toggle">{{msg}}</strong>
<ul>
<li v-for="val in arr">{{val}}</li>
</ul>
</template>
<script type="text/javascript">
Vue.component('my-aaa',{
data(){
return{
msg:'標題1111',
arr:['apple','banana','orange']
}
},
methods:{
toggle(){
this.msg="change"
}
},
template:'#aaa'
});
var vm = new Vue({
el:'#box'
});
</script>
===========================================
定義動態組件:
可實現標簽切換:
<div id="box">
<input type="button" value="我是aaa組件" @click="a='aaa'">
<input type="button" value="我是bbb組件" @click="a='bbb'">
<component :is="a"></component> //*自定義動態組件
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是標題aaa</h2>'
},
'bbb':{
template:'<h2>我是標題bbb</h2>'
}
}
});
</script>
父子組件的定義：
<div id="box">
<aaa></aaa>
</div>
var vm = new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是標題aaa</h2><bbb></bbb>',
components:{
'bbb':{
template:'<h2>我是標題bbb</h2>'
}
}
}
}
});
----------------------------------------------------------------------------------
vue在默認情況下,子組件沒法訪問父組件的數據
組件之間數據的傳遞(推薦使用)
1.子組件想獲取父組件的data，通過props方法
props有兩種寫法：
1)props:['m','myMsg']
2)props:{
m:String,
myMsg:Number
}
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<h2>1111111-->{{msg}}</h2>
<bbb :m="msg" :my-msg="msg1"></bbb>
</template>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return{
msg:'我是父組件的數據',
msg1:111
}
},
template:'#aaa',
components:{
'bbb':{
props:['m','myMsg'],//props綁定自定義屬性m,進行組件之間的數據傳遞,
且這里應該是駝峰式寫法
template:'<h2>我是標題bbb-->{{m}}<br/>{{myMsg}}</h2>'
}
}
}
}
});
</script>
2.父組件想獲取子組件的data
*子組件把自己的數據發送到父組件
發送方法:vm.$emit(事件名稱,發送的數據)
v-on:接收數據-->@事件名稱="函數" (函數寫到父組件methods里面,這里沒有括號)
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<h3>父組件-->{{msg}}</h3>
<bbb @child-msg="get"></bbb> //**這里接收get后面不能有括號
</template>
<template id="bbb">
<span>子組件-->{{a}}</span>
<input type="button" value="send數據" @click="send()">
</template>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
},
components:{
'aaa':{
data(){
return{
msg:'我是父組件的數據',
msg1:111222
}
},
template:'#aaa',
methods:{
get(msg){
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return{
a:'我是子組件的數據'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a); //數據以名稱child-msg發送出去
}
}
}
}
}
}
});
</script>
-------------------------------------------------------------------------
其他組件之間數據傳遞方法:
vm.$dispatch(事件名,數據) -->子組件向父組件發送數據
vm.$broadcast(事件名,數據) -->父級向子級廣播數據
這兩個需要配合event:{}使用
不推薦使用,因為在vue2.0中已經淘汰了
-------------------------------------------------------------------------
slot的使用：
slot:位置，槽口
作用:占個位置
類似ng里的transclude(指令)
我們在定義一個組建的時候，自己定義的template標簽內容會把自定義組件內的內容全部覆蓋掉，
如下面aaa組件里的ul列表就不會顯示出來，被覆蓋掉了，但是我們在實際中是不想被覆蓋的，
這時就用到slot，避免被占用。
示例一：沒有使用slot，aaa組件里的ul列表不會顯示出來
<div id="box">
<aaa>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</aaa>
</div>
<template id="aaa">
<h2>標題1:welcome vue</h2>
<p>段落</p>
</template>
var vm = new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
示例2：使用slot，在template標簽里預先占一個位置，此時aaa組件里的ul列表顯示在h2與p標簽的中間
<div id="box">
<aaa>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</aaa>
</div>
<template id="aaa">
<h2>標題</h2>
<slot>這是默認的內容</slot>
<p>段落</p>
</template>
var vm = new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
默認情況下,slot,代表aaa標簽里面的所有內容,
有時需要單獨代表,
<div id="box">
<aaa>
<ul slot="ul-slot">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol slot="ol-slot">
<li>444</li>
<li>555</li>
<li>666</li>
</ol>
</aaa>
</div>
<template id="aaa">
<h2>標題</h2>
<slot name="ol-slot">這是默認的內容1</slot>
<slot name="ul-slot">這是默認的內容2</slot>
<p>段落</p>
</template>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
</script>