Vue常用的三種傳值方式有：
父?jìng)髯?用屬性傳
子傳父 用事件傳
非父子傳值 第三方量
組件（component）：是Vue最輕大的功能之一。 組件化開(kāi)發(fā)
特點(diǎn)：組件可以擴(kuò)展HTML元素灭抑，封裝可重用代碼计寇。
組件在命名是不可以使用HTML中的元素
組件分為全局與局部：
全局注冊(cè)為
<div id="itany">
<組件名></組件名>//組件名不能用HTML元素
</div>
Vue.component('組件名'，{
template:`<p>這是組件的全局注冊(cè)</p>`
})
new Vue({
el:'#itany'
})
局部注冊(cè)為：
<div id="itany">
<組件名></組件名>
</div>
new Vue({
el:'#itany',
components:{
'組件名':{
template:`<p>1581</p>`
}
}
})
組件中可以寫(xiě)多個(gè)Vue.component
例如：
<div id="app">
<my-itany></my-itany>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-itany',{
template:`
<div>
<p>第一行</p>
<you-itany v-bind:message="mas"></you-itany>
</div>
`,
data:function(){
return{
mas:'asfg'
}
}
})
Vue.component('you-itany',{
props:['message'],
template:`
<div>
<p>{{message}}</p>
</div>
`
})
new Vue({
el:'#app'
})
</script>
注意：在組件中data選項(xiàng)必須是一個(gè)函數(shù)且有返回值
組件中可以正常使用vue中的指令
例如：
<div id="itany">
<n-component></n-component>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('n-component',{
template:`
<div>
<p>{{message}}</p>
<button v-on:click="add">按鈕</button>
</div>
`,
data:function(){
return{
message:'dcgf'
}
},
methods:{
add:function(){
alert(11111)
}
}
})
new Vue({
el:'#itany'
})
</script>
組件props
選項(xiàng)props是父子組件間的橋梁
props格式為：props：[' 自定義屬性'],
例如：
<div id="app">
<my-mother></my-mother>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-mother',{
template:`
<div>
<my-tit v-bind:tit="title"></my-tit>
</div>
`,
data:function(){
return{
arr:['banana','apple','orange'],
title:'水果販賣(mài)'
}
}
})
Vue.component('my-tit',{
props:['tit'],
template:`
<p>{{tit}}</p>
`
})
//輸出結(jié)果為：水果販賣(mài)
子傳父用事件傳（$emit）
this.$emit('自定義事件'瓷患，參數(shù))。
子組件中需要以某種方式例如點(diǎn)擊事件的方法來(lái)觸發(fā)一個(gè)自定義事件
將需要傳的值作為$emit的第二個(gè)參數(shù)，該值將作為實(shí)參傳給響應(yīng)自定義事件的方法
在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定對(duì)自定義事件
舉個(gè)最基本的例子：
<div id="itany">
<my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-father',{
template:`
<div>
<p>{{message}}</p>
<my-son @send="jieSend"></my-son>
</div>
`,
data:function(){
return{
message:''
}
},
methods:{
jieSend:function(text){
this.message=text
}
}
})
Vue.component('my-son',{
template:`
<button @click="send">傳遞</button>
`,
data:function(){
return{
msg:'Who are you?'
}
},
methods:{
send:function(){
this.$emit('send',this.msg)
}
}
})
new Vue({
el:'#itany'
})
</script>
輸出結(jié)果為點(diǎn)擊button出現(xiàn)Who are you疤孕？
13921236-2dad795215cef90e.png
的公共實(shí)例but，作為中間倉(cāng)庫(kù)來(lái)傳值
<div id="app">
<father></father>
<son></son>
</div>
<script src="js/vue.js"></script>
<script>
//引入公共的but央拖，來(lái)做為中間傳達(dá)的工具
var but = new Vue();
Vue.component('father',{
template:`
<div>
<h1>我是father組件</h1>
<button @click="send">發(fā)送</button>
</div>
`,
data:function(){
return{
mas:'who are you'
}
},
methods:{
send:function(){
but.$emit('sends',this.mas)
}
}
})
Vue.component('son',{
template:`
<div>
<h1>我是son組件</h1>
<a href="">{{mass}}</a>
</div>
`,
data:function(){
return{
mass:''
}
},
mounted:function(){
but.$on('sends',mas=>{//箭頭函數(shù)的this指向不同祭阀，文章最后有‘this指向詳細(xì)解析的網(wǎng)頁(yè)’
this.mass=mas
})
}
})
new Vue({
el:'#app'
})
</script>
箭頭函數(shù)this指向詳細(xì)解析：https://www.cnblogs.com/dongcanliang/p/7054176.html（如有需要請(qǐng)?zhí)D(zhuǎn)網(wǎng)頁(yè)觀看）
