## vue学习笔记--简单父子组件--
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了## vue学习笔记--简单父子组件--相关的知识，希望对你有一定的参考价值。
## 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>
<[email protected]>
</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>
<[email protected]>
</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学习笔记--简单父子组件--的主要内容，如果未能解决你的问题，请参考以下文章