Vue創(chuàng)建組件的方式
使用Vue.Extend()和Vue.component全局注冊組件
首先我們定義一個組件并接收
var com1 =Vue.extend({
template:"<h3>這是通過Vue.extend創(chuàng)建的組件</h3>"
});
然后我們全局注冊這個組件
Vue.component('mycom1',com1);
這樣我們就可以在我們的代碼中使用我們的mycom1組件了
<div id="app">
<mycom1></mycom1>
</div>
需要注意的是渗勘，如果我們注冊的組件名稱是以駝峰命名法來命名的欢峰，那么我們在使用的時候將不能使用原本注冊時的命名活烙，如下的寫法時錯誤的
//定義
Vue.component('myCom1',com1);
//使用
<div id="app">
<myCom1></myCom1>
</div>
我們在使用的時候需要將駝峰命名法的兩個單詞使用‘-’進行分開冻辩，并且更加推薦‘-’左右兩端的單詞均使用小寫圣蝎，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<my-com1></my-com1>
</div>
<script>
var com1 =Vue.extend({
template:"<h3>這是通過Vue.extend創(chuàng)建的組件</h3>"
});
Vue.component('myCom1',com1);
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
同時我們可以將構造和注冊結合在一起
Vue.component('myCom1',Vue.extend({
template:"<h3>這是通過Vue.extend創(chuàng)建的組件</h3>"
}));
更加簡化的方式
Vue.component('myCom1',{
template:"<h3>這是通過Vue.extend創(chuàng)建的組件</h3>"
});
需要注意的是娜膘，我們不管使用哪種方式來定義組件，template中定義的頂級元素只能有一個级乍，否則會出現(xiàn)錯誤
使用Vue.component()配合Vue的templete標簽來定義組件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<my-com1></my-com1>
</div>
<template id="mycom2">
<h3>這是通過Templete定義的組件舌劳，在html代碼中有智能提示</h3>
</template>
<script>
Vue.component('myCom1',{
template:"#mycom2"
});
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
需要注意的是，上述的定義方式都是定以的全局Vue對象均可使用玫荣，下面我們定義一個私有的組件
Vue.component私有組件
Vue對象內部有一個components組件甚淡，可以定義我們想要的組件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login></login>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
components:{
login:{
template:'<h3>這是私有的login組件</h3>'
}
}
})
</script>
</body>
</html>
同時仍然可以使用上述的template方式來定義組件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login></login>
</div>
<template id="app2">
<h3>這是私有組件配合template方式定義的組件</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
},
components:{
login:{
template:'#app2'
}
}
})
</script>
</body>
</html>
組件的data
定義的組件可以有自己的data數(shù)據(jù)域，但是data必須為一個function且必須返回一個對象格式的數(shù)據(jù)捅厂，除此之外和Vue對象中的data的使用方法完全一致
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login></login>
</div>
<template id="app2">
<h3>這是私有組件配合template方式定義的組件---{{msg}}</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
},
components:{
login:{
template:'#app2',
data:function(){
return {
msg:"這是組件中的數(shù)據(jù)"
}
}
}
}
})
</script>
</body>
</html>
組件切換
使用v-if和v-else實現(xiàn)組件切換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<a href="#" @click.prevent="flag=true">登錄</a>
<a href="#" @click.prevent="flag=false">注冊</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<template id="app2">
<h3>這是登錄組件</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true
},
components:{
login:{
template:'#app2',
},
register:{
template:'<h3>注冊組件</h3>',
}
}
})
</script>
</body>
</html>
不過使用這種方式只能實現(xiàn)兩種類型的組件切換
使用component元素進行組件切換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<a href="#" @click.prevent="comName='login'">登錄</a>
<a href="#" @click.prevent="comName='register'">注冊</a>
<component :is="comName"></component>
</div>
<template id="app2">
<h3>這是登錄組件</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
comName:'login'
},
components:{
login:{
template:'#app2',
},
register:{
template:'<h3>注冊組件</h3>',
}
}
})
</script>
</body>
</html>
我們使用定義在data中的屬性來切換component中要展示的組件贯卦，使用:is來代表最后要展示的組件的值
父子組件傳值
父組件向子組件傳遞數(shù)據(jù)
子組件默認無法直接訪問到父組件（對象）中的數(shù)據(jù)，需要使用v-bind表達式來傳遞焙贷，結合組件的props屬性來使用撵割，即可達到父組件向子組件傳遞數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login v-bind:parentmsg="msg"></login>
</div>
<template id="app2">
<h3>這是私有組件配合template方式定義的組件--{{parentmsg}}</h3>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"這是父組件中的數(shù)據(jù)"
},
components:{
login:{
template:'#app2',
data(){
return {
name:'zhangsan',
age:'24'
}
},
props:['parentmsg']
}
}
})
</script>
</body>
</html>
需要注意的是，通過props傳遞過來的數(shù)據(jù)是不推薦被修改的辙芍，強行修改會報錯
props中定義的屬性全部都是由父組件傳遞給子組件的
而子組件data中的數(shù)據(jù)是組件私有啡彬，可以被修改的
子組件向父組件傳遞數(shù)據(jù)
子組件向父組件傳值是通過父組件向子組件傳遞事件實現(xiàn)的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<login @func="show"></login>
</div>
<template id="app2">
<input type="button" value="子組件按鈕" @click="myclick" />
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:"這是父組件中的數(shù)據(jù)"
},
methods:{
show(data){
console.log("這是父組件的事件"+data)
}
},
components:{
login:{
template:'#app2',
data(){
return {
name:'zhangsan',
age:'24'
}
},
props:['parentmsg'],
methods:{
myclick(){
this.$emit('func',this.name);
}
}
}
}
})
</script>
</body>
</html>
從如上代碼可知，父組件調用子組件中的數(shù)據(jù)需要借助this.$emit來進行傳遞沸手，傳遞的第一個參數(shù)都是函數(shù)名外遇，后面的參數(shù)都是傳遞的數(shù)據(jù)，可以傳遞單個屬性或者是對象
