Vue兄弟組件之間傳值## 自定義屬性
兄弟組件之間用Vue實(shí)例傳
示例:
```
<div id="app">
<ca></ca>
<cb></cb>
</div>
var bus=new Vue();//定義一個(gè)Vue實(shí)例
Vue.component('ca',
template:`
<div>
<h1>組件A</h1>
<button @click="sendEvent">發(fā)送</button>
</div>
`,
data:function(){
return{
msg:"A組件傳B組件"
}
},
methods:{
send(){
bus.$emit('sendEvent',this.msg)
}
}
})
Vue.component('cb',{
template:`
<div>
<h1>組件B</h1>
<p>{{txt}}</p>
</div>
`,
data:function(){
txt: ""
},
mounted(){
var that=this
bus.$on("sendEvent",function(a){
that.txt=a;
})
}
})
```
自定義指令
語(yǔ)法:
Vue.directive('a',
inserted(el){ //生命周期,被綁定元素插入父節(jié)點(diǎn)是調(diào)用;el是形參,但不能改變
}
)
隨機(jī)變換顏色示例:
Vue.direvtive('color',{
var num=(Math.random()*100000.toFixed(0))
el.style.background='#'+num
})
Vue.use()主要用于在Vue中安裝插件。
插件可以是一個(gè)函數(shù)也可以是一個(gè)對(duì)象,如果是對(duì)象,必須提供 install()方法。