子组件写法
this.$emit(‘fa’, this.num)
父组件写法
{{sonNum}}
// 注册全局对象，要写在vue实例的上面
Vue.component('button-add', {
data: function () {
return {
num: 0
}
},
template: `{{num}}`,
methods: {
add: function () {
在Vue.js框架中，通信是组件之间相互协作的基础。这里我们关注的是子组件如何向父组件传递数据，这个过程通常被称为“自定义事件”或“事件冒泡”。Vue.js提供了`$emit`方法来实现这一功能。让我们深入探讨一下这个过程。
子组件想要向父组件发送一个值，它需要通过`this.$emit`触发一个自定义事件，并将要传递的数据作为参数。在给定的描述中，子组件的代码片段如下：
```javascript
methods: {
add: function () {
this.num = this.num + 1
this.$emit('fa', this.num)
}
}
```
这里，`add`方法被调用时，会增加`num`的值并使用`this.$emit('fa', this.num)`触发一个名为`fa`的自定义事件，同时将更新后的`num`值作为参数传递出去。
父组件需要监听这个自定义事件并处理传递过来的数据。这通常在父组件的模板中通过`v-on`或简写`@`来完成。父组件的代码如下：
```javascript
var vm = new Vue({
el: '#app',
data: {
sonNum: 0
},
methods: {
getNum: function (son) {
this.sonNum = son
}
}
})
```
父组件创建了一个名为`vm`的Vue实例，并在`el`选项中指定了挂载元素。在`data`对象中定义了`sonNum`属性，用于接收子组件传递的值。然后，定义了一个`getNum`方法，这个方法会在接收到子组件的`fa`事件时被调用，将`son`参数（即子组件传递的值）赋值给`sonNum`。
在模板部分，子组件需要这样注册：
```html
Vue.component('button-add', {
data: function () {
return {
num: 0
}
},
template: `{{num}}`,
methods: {
add: function () {
this.num = this.num + 1
this.$emit('fa', this.num)
}
}
})
```
这里，`button-add`是子组件的名称，`data`和`methods`中的内容与之前的描述相同。`template`选项定义了子组件的视图模板，显示当前的`num`值。
在父组件的模板中，我们使用`<button-add>`标签来引入子组件，并通过`@fa`监听`fa`事件，将`getNum`方法绑定到这个事件上：
```html
<template>
<div id="app">
<button-add @fa="getNum"></button-add>
<p>父组件接收到的值: {{ sonNum }}</p>
</div>
</template>
```
这样，每当子组件的`add`方法被触发，父组件的`sonNum`就会更新，展示出最新的值。
总结来说，Vue.js中的子组件向父组件传递值是通过`$emit`方法触发自定义事件，然后父组件通过`v-on`或`@`监听这个事件并处理传递的数据。这个机制使得组件间的通信变得灵活且易于管理。在实际开发中，根据项目的复杂性，还可以结合Vuex等状态管理工具，进一步优化组件间的数据流动。
