Vue自定义事件组件交互

## 使用Vue的自定义事件进行数据的反向传递

- 首先，在子组件中，我们设置一个按钮，用于传递数据；
`<button @click="sendClickHandle">点击传递</button>`

- 对应的script中，设置了点击事件触发的方法，名为onEvent，onEvent方法通过emit方法将子组件中的message变量传递到父组件去；
```js
export default{
	name: 'mycomp2',
	data(){
		return{
			message: "我是子组件中的数据"
		}
	},
	methods:{
		sendClickHandle(){
			//参数1：字符串，理论上是随便的，但要有意义
			// 参数2： 传递的数据
			this.$emit("onEvent", this.message)
		}
	}
}
```

- 最后，父组件中引用了该子组件，并通过v-on（即@）监听子组件中的onEvent方法，并绑定一个自定义事件进行数据获取。
`<mycomp2 @onEvent="getDataHandle" />`

```js
import mycomp2 from './components/mycomp2.vue'
export default{
	name: "App",
	data(){
		return{
			title:"我是一个标题，传递参数",
			age: 20,
			names: ["Wang", "Li", "Liu"],
			author:{
				id: 1,
				name: "liuhuan"
			}
		}
	},
	components:{
		MyComponent,
		mycomp2
	},
	methods:{
		getDataHandle(data){
			console.log(data);
		}
	}
}
```

### 触发与监听事件
- 子组件中
在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：
```

<button @click="$emit('someEvent')">click me</button>
```
$emit() 方法在组件实例上也同样以 this.$emit() 的形式可用：
```js
export default {
  methods: {
    submit() {
      this.$emit('submit')
    }
  }
}
```

- 父组件中
父组件可以通过 v-on (缩写为 @) 来监听事件：
`
<MyComponent @some-event="callback" />`
同样，组件的事件监听器也支持 .once 修饰符：
`<MyComponent @some-event.once="callback" />`
像组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。

### 事件参数
有时候我们会需要在触发事件时附带一个特定的值。举例来说，我们想要`<BlogPost>` 组件来管理文本会缩放得多大。在这个场景下，我们可以给 $emit 提供一个额外的参数：
```
<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>
```
然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：
`<MyButton @increase-by="(n) => count += n" />`
或者，也可以用一个组件方法来作为事件处理函数：
`<MyButton @increase-by="increaseCount" />`
该方法也会接收到事件所传递的参数：
```js
methods: {
  increaseCount(n) {
    this.count += n
  }
}
```
> w所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，$emit('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。

### 声明触发的事件
组件要触发的事件可以显式地通过 emits 选项来声明：
```js
export default {
  emits: ['inFocus', 'submit']
}
```
这个 emits 选项还支持对象语法，它允许我们对触发事件的参数进行验证：
```js
export default {
  emits: {
    submit(payload) {
      // 通过返回值为 `true` 还是为 `false` 来判断
      // 验证是否通过
    }
  }
}
```
尽管事件声明是可选的，我们还是推荐你完整地声明所有要触发的事件，以此在代码中作为文档记录组件的用法。同时，事件声明能让 Vue 更好地将事件和透传 attribute 作出区分，从而避免一些由第三方代码触发的自定义 DOM 事件所导致的边界情况。
>w 如果一个原生事件的名字 (例如 click) 被定义在 emits 选项中，则监听器只会监听组件触发的 click 事件而不会再响应原生的 click 事件。

### 事件校验#
和对 props 添加类型校验的方式类似，所有触发的事件也可以使用对象形式来描述。

要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 this.$emit 的内容，返回一个布尔值来表明事件是否合法。
```js
export default {
  emits: {
    // 没有校验
    click: null,

// 校验 submit 事件
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}
```