vue組件
什麼是組件： 組件的出現，就是爲了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用對應的組件即可；
組件化和模塊化的不同：
- 模塊化： 是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每個功能模塊的職能單一；
- 組件化： 是從UI界面的角度進行劃分的；前端的組件化，方便UI組件的重用；
全局組件定義的三種方式
注意:無論是那一種方式創建出來的組件,template屬性指向的模板內容只能有一個根元素
1.使用 Vue.extend 配合 Vue.component 方法：
//這是通過Vue.extend創建的全局組件
var com1 = Vue.extend({
template: '<h3>這是通過Vue.extend創建的組件</h3>'
});
//使用組件 Vue.component('組件名稱',創建出來的組件模板對象)
//組件名稱可以是大寫,如myCom1 但是在調用的時候要以my-com1來調,或者直接使用小寫來命名組件
Vue.component('myCom1',com1)
//也可以合併成爲一句來寫
Vue.component('myCom1', Vue.extend({
template: '<h3>這是通過Vue.extend創建的組件</h3>'
}))
在html裏面調用模板
<div id="app">
<my-com1></my-com1><!--正確方式-->
<!-- <myCom1></myCom1> 錯誤方式-->
</div>
2.直接使用 Vue.component 方法：
Vue.component('mycom2',{
template:'<h3>這是Vue.extend創建的模板</h3>'
})
3.將模板字符串，定義到script標籤種：
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 在控制的元素app外面使用template元素定義組件的html模板結構 -->
<template id="temp1">
<h3>這是通過template在在外部定義組件結構這種方式有代碼提示</h3>
</template>
<script type="text/javascript">
Vue.component('mycom3',{
template:'#temp1'
})
var vm = new Vue({
el:'#app',
data:{
}
});
</script>
</body>
自定義私有組件
<body>
<div id="app">
<com4></com4>
<com5></com5>
<com6></com6>
</div>
<template id="temp1">
<h3>這是通過template在在外部定義組件結構這種方式有代碼提示 私有組件</h3>
</template>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
},
//定義示例內部私有組件
components: {
com4: Vue.extend({
template: '<h3>這是一個私有組件Vue.extend</h3>'
}),
com5: {
template: '<h3>這是一個私有組件,簡寫方式</h3>'
},
com6: {
template: '#temp1'
}
}
});
</script>
</body>
組件中的data數據
<script type="text/javascript">
//1組件可以有自己的data數據
//2組件的data和實例的不一樣 實例中的對象可以爲一個對象 但是組件中的data必須是一個方法
//3組件中的data除了必須爲一個方法之外,這個方法的內部必須返回一個對象
//4 組件中的data數據和實例中的data數據使用一樣
Vue.component('com1', Vue.extend({
template: '<h3>這是h3標籤----{{msg}}</h3>',
data: function() {
return {
msg: '這是組件中data定義的數據'
}
}
}))
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
});
</script>
組件中的方法和組件的獨立性
<body>
<div id="app">
<com1></com1>
<com1></com1>
<com1></com1>
</div>
<template id="temp">
<div>
<input type="button" value="+1" @click="addNum" />
<h3>{{msg}}</h3>
</div>
</template>
<script type="text/javascript">
//1組件可以有自己的data數據
//2組件的data和實例的不一樣 實例中的對象可以爲一個對象 但是組件中的data必須是一個方法
//3組件中的data除了必須爲一個方法之外,這個方法的內部必須返回一個對象
//4 組件中的data數據和實例中的data數據使用一樣
//5.爲了保證組件的獨立性 所以data中return的對象不能是外面的,必須要寫在return後面
//,如果return的是組件外面的對象,不管實例化多少對象,指向的都是同一個地址,也就是多個組件
//共用一個data,一個實例數據發生變化,其餘的組件數據也會發生變化
// 6.要使用組件中的方法 事件必須綁定在模板上面
Vue.component('com1', Vue.extend({
template: '#temp',
data: function() {
return {
msg: 0
}
},
methods: {
addNum() {
this.msg++;
}
}
}))
var vm = new Vue({
el: '#app'
});
</script>
</body>
使用flag標識符結合v-if和v-else切換組件
<body>
<div id="app">
<a href="#" @click.prevent="flag=true">登錄</a>
<a href="#" @click.prevent="flag=flase">註冊</a>
<com1 v-if="flag"></com1>
<com2 v-else="flag"></com2>
</div>
<script type="text/javascript">
Vue.component('com1', Vue.extend({
template: '<h3>登錄</h3>',
}))
Vue.component('com2', Vue.extend({
template: '<h3>註冊</h3>',
}))
var vm = new Vue({
el: '#app',
data: {
flag: true
}
});
</script>
</body>
使用:is屬性來切換不同的子組件,並添加切換動畫
<body>
<div id="app">
<a href="#" @click.prevent="com='com1'">登錄</a>
<a href="#" @click.prevent="com='com2'">註冊</a>
<!-- vue提供了component 來展示對應的組件 -->
<!-- component是一個佔位符 :is屬性可以指定要展示組建的名稱(名稱是一個字符串) -->
<component :is="com"></component>
</div>
<script type="text/javascript">
Vue.component('com1', Vue.extend({
template: '<h3>登錄</h3>',
}))
Vue.component('com2', Vue.extend({
template: '<h3>註冊</h3>',
}))
var vm = new Vue({
el: '#app',
data: {
flag: true,
com: 'com1'
}
});
</script>
</body>
添加動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="#" @click.prevent="com='com1'">登錄</a>
<a href="#" @click.prevent="com='com2'">註冊</a>
<!-- mode切換動畫時的模式,是先出後進,還是先進後出 -->
<!-- 給組件設置動畫 只需要將組件寫到transition標籤裏面 -->
<transition mode="out-in">
<component :is="com"></component>
</transition>
</div>
<script type="text/javascript">
Vue.component('com1', Vue.extend({
template: '<h3>登錄</h3>',
}))
Vue.component('com2', Vue.extend({
template: '<h3>註冊</h3>',
}))
var vm = new Vue({
el: '#app',
data: {
flag: true,
com: 'com1'
}
});
</script>
</body>
</html>
父組件向子組件傳值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
父組件向子組件傳值
1.定義一個組件
2.在組件身上綁定一個自定義屬性指向父組件的data中的數據 如(datas)
<com1 v-bind:datas="msg1"></com1>
3.將自定義的屬性在子組件內部props定義一下,以數組字符串的形式定義 如props:['datas']
4.在子組件模板中就可以通過自定義屬性訪問數據
template:'<h3>子組件{{datas}}</h3>',
5.data身上的數據可讀可寫,props身上定義的數據只可以讀
-->
<div id="app">
<com1 v-bind:datas="msg1"></com1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg1: '父組件的數據'
},
components: {
'com1': Vue.extend({
template: '<span>子組件<br/> {{datas}} </span>',
data: function() {
return {
msg: '子組件數據'
}
},
props: ['datas']
})
}
});
</script>
</body>
</html>
子組件調用父組件的方法
<body>
<!--
子組件調用父組件的方法:
1,創建一個模板組件,給自己的組件寫一個指向自己的方法;
2.在控制區域的組件身上自定義一個事件,指向父組件的方法:<com1 @fun="show"></com1>
3.在子組件裏面使用this.$emit('自定義事件名'),觸發父組件身上的方法;
-->
<div id="app">
<com1 @fun="show"></com1>
</div>
<template id="temp1">
<div>
<button @click="sonbtn">子組件按鈕</button>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {},
methods: {
show() {
console.log("這是父組件的方法")
}
},
components: {
com1: {
template: '#temp1',
methods: {
sonbtn() {
this.$emit('fun')
}
}
}
}
});
</script>
</body>
子組件向父組件傳值
<body>
<!--
子組件調用父組件的方法:
1,創建一個模板組件,給自己的組件寫一個指向自己的方法;
2.在控制區域的組件身上自定義一個事件,指向父組件的方法:<com1 @fun="show"></com1>
3.在子組件裏面使用this.$emit('自定義事件名'),觸發父組件身上的方法;
4.this.$emit('自定義事件名',對應父組件的形參個數),通過形參傳值給父組件;
-->
<div id="app">
<com1 @fun="show"></com1>
</div>
<template id="temp1">
<div>
<button @click="sonbtn">子組件按鈕</button>
</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {},
methods: {
show(data1, data2) {
console.log("這是父組件的方法")
console.log(data1)
console.log(data2)
}
},
components: {
com1: {
template: '#temp1',
methods: {
sonbtn() {
this.$emit('fun', '第一個形參對應的數據', "第二個形參對應的數據")
}
}
}
}
});
</script>
</body>
vue使用ref獲取Dom元素和組件引用
<body>
<!--
ref 獲取dom元素；
1.給需要獲取的dom元素添加一個屬性ref="自定義名稱";如<span ref="myspan">這是一個span標籤</span>
2.現在就可以在vm實例中使用this.$refs.自定義名稱;獲取到dom元素;console.log(this.$refs.myspan)
ref獲取組件的data和methods
1.給控制區域的組件添加一個屬性ref="自定義名稱";如<com ref="mycom"></com>
2.現在就可以在vm實例中使用this.$refs.自定義名稱;訪問到組件
3.通過 this.$refs.自定義名稱.data裏面的屬性; 獲取到組件的屬性
3.通過 this.$refs.自定義名稱.methods裏面的方法名; 就可以調用組建的方法
-->
<div id="app">
<button @click="btns">點擊輸出到控制檯</button>
<span ref="myspan">這是一個span標籤</span>
<com ref="mycom"></com>
</div>
<template id="temp1">
<div>組件</div>
</template>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
},
methods: {
btns() {
console.log(this.$refs.myspan)
console.log(this.$refs.mycom)
console.log(this.$refs.mycom.id)
this.$refs.mycom.show()
}
},
components: {
'com': {
template: '#temp1',
data: function() {
return {
id: 3
}
},
methods: {
show() {
console.log("這是組件的方法")
}
}
}
}
});
</script>
</body>