組件
先看程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<com :parent_msg="msg" @func="getSonData"></com>
<h2>{{sonData}}</h2>
</div>
<template id="com">
<div id="">
<h3>子組件，父組件向子組件傳值爲：{{parent_msg}}</h3>
<input type="button" value="子組件向父組件傳值" @click="dataForSon" />
</div>
</template>
<script type="text/javascript">
var com = {
template:'#com',
props:['parent_msg'],
data(){
return {
son_msg:'子組件的數據'
}
},
methods:{
dataForSon(){
this.$emit('func',this.son_msg)
}
}
}
var vm = new Vue({
el:'#app',
data:{
msg:'父組件的值',
sonData:''
},
components:{
com
},
methods:{
getSonData(data){
this.sonData = data;
}
}
})
</script>
</body>
</html>
組件定義
組件是Vue的一種可複用實例，其名字可以自定義，並且因爲組件是一種Vue實例，因此具有自己的data，methods，以及鉤子函數等，但沒有el選項。
組件的定義有全局組件和 局部組件之分，其定義方式及使用方式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>JavaScript聲明全局組件時，其要在Vue實例化（new Vue（））之前</p>
<global></global>
<local></local>
</div>
<div id="app2">
<!-- 全局組件在其它Vue實例中也能使用 -->
<global></global>
<!-- 局部組件（私有組件）是在特定實例中定義，因此其它組件並不能使用，-->
<!-- 若在其它實例中使用，控制檯會報錯 -->
<local></local>
</div>
<script type="text/javascript">
Vue.component('global',{
template:"<p v-html='msg'></p>",
data:function(){
return {
msg:'全局組件---組件中的<b>data</b>選項必須是一個函數，<b>並且返回的是一個對象</b>'
}
}
})
new Vue({
el:'#app',
components:{
local:{
template:"<p>局部組件，其數據定義與全局組件無異</p>"
}
}
})
new Vue({
el:'#app2'
})
</script>
</body>
</html>
組件中父子組件傳值
在組件中傳值有兩種：父組件向子組件傳值，子組件向父組件傳值。開頭的第一個程序實例就實現了父子組件傳值的兩種方式。因此以開頭代碼爲例：
vue實例的定義：
var vm = new Vue({
el:'#app',
data:{
msg:'父組件的值',
sonData:''
},
components:{
com
},
methods:{
getSonData(data){
this.sonData = data;
}
}
})
在上述中定義了vm的Vue實例，其子組件是com，關於com定義如下：
<template id="com">
<div id="">
<h3>子組件，父組件向子組件傳值爲：{{parent_msg}}</h3>
<input type="button" value="子組件向父組件傳值" @click="dataForSon" />
</div>
</template>
var com = {
template:'#com',
props:['parent_msg'],
data(){
return {
son_msg:'子組件的數據'
}
},
methods:{
dataForSon(){
this.$emit('func',this.son_msg)
}
}
}
父組件向子組件傳值
1. 利用props屬性：
在vm實例中定義的msg是不可以直接被子組件使用的，因此需要用到到子組件的props屬性，並且在父組件進行如下定義：
<div id="app">
<com :parent_msg="msg" @func="getSonData"></com>
<h2>{{sonData}}</h2>
</div>
在上述代碼中com使用了子組件。:parent_msg="msg"是v-bind:parent_msg="msg"的縮寫。其中parent_msg是要在子組件定義：props:['parent_msg']，然後在子組件中調用插值表達式：{{parent_msg}} 來使用父組件的數據。（可以看作將父組件的msg數據綁定到子組件中的parent_msg引用上）。
子組件向父組件傳值
因爲有點複雜，以一個新的代碼爲例：
<div id="app">
<cm @fuc="getSonData"></cm>
<p>{{sonData}}</p>
</div>
<template id="cm">
<div id="">
<h1>{{msg}}</h1>
<button type="button" @click="sendData">向父組件發送數據</button>
</div>
</template>
<script>
var cm ={
template:'#cm',
data:function(){
return {
msg:'我是子組件的數據'
}
},
methods:{
sendData(){
this.$emit('fuc',this.msg)
}
}
}
new Vue({
el:'#app',
components:{
cm
},
data:{
sonData:''
},
methods:{
getSonData(data){
this.sonData = data
}
}
})
</script>
如上代碼，可以看作子組件通過點擊事件調用sendData函數，該函數的函數體是this.$emit('fuc',this.msg)，其中fuc是父組件的函數getSonData(data)綁定的事件，this.msg是父組件函數的參數data。
補充：
vm.$emit( eventName, […args] )
參數：
{string} eventName
[...args]
觸發當前實例上的事件。附加參數都會傳給監聽器回調。