## vue學習筆記

### 組件之間的通訊
1. 父組件到子組件
```js
//father
<div>
<son msg="父組件的信息寫在這"></son>
<son title="title"></son>
<!--:title-->
</div>
<script>
export default {
data(){
return {
title: ‘當傳遞一個變量過去的時候‘
}
}
}
//當傳遞綁定的變量

</script>
//son
<div>
<p>{{ msg }}</p>
</div>
<script>
export default {
prosp:[‘msg‘]
}
</script>
```

2. 子組件到父組件消息傳遞
```js
//子組建
<template>
<button click="anyName( 5 ,3, $event)">點擊按鈕</button>
<!--@click-->
</template>
<script>
export default {
//定義方法
methods:{
//自定義事件
anyName( num,num1 ,event){
console.log(1);
this.$emit(‘fatherevent‘, num,num1,event )
}
}
}
</script>
//父組件
<template>
<div>
<btn fatherevent="any"></btn>
<!--@fatherevent-->
</div>
</template>
<script>
import btn from "@/components/btn"
export default {
components: {
btn
},
methods:{
any(a,b,c){
console.log(‘father‘)
console.log( a,b,c )
}
}
}
</script>

在父組件中綁定一個自定義事件
在子組建發射 this.$emit(‘fatherevent‘, num,num1,event )

```

## vue學習筆記--簡單父子組件--