子组件向父组件通信
子组件的button按钮绑定点击事件,事件方法名为
sendToParent(),该方法在子组件的methods中声明,实现功能
this.$emit('cus-event',this.msg);在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中
this.msg = e;console.log(e),而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息
父组件调用子组件中的方法
点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],
useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即
this.$refs.child1.getMsg(str);而getMsg方法已经在子组件的methods中声明,其行为是
console.log(‘子级组件收到父级的内容’,str);,所以,最终的输出结果为: 子级组件收到父级的内容 父级消息
代码示例（结合上面的分析理解代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子向父通信</title>
<style>
#app {
border: 1px solid blue;
width: 500px;
padding: 20px;
margin: auto;
border-radius: 8px;
background: fuchsia;
}
#wrapper {
border: 1px solid red;
width: 400px;
padding: 20px;
border-radius: 8px;
background: yellowgreen;
margin-top: 20px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<!-- 父组件 -->
<h1>这是父组件</h1>
<p>展示父级接收到的消息:{{msg}}</p>
<button @click="useChild(szStr)">调用子组件的方法</button>
<!-- cus-event为子组件自定义的事件名； doAction($event)为父组件的事件，参数$event不可少也不可写成其他-->
<!-- ref表示组件的别名 -->
<child @cus-event="doAction($event)" ref="child1"></child>
</div>
</body>
</html>
<template id="child">
<div id="wrapper">
<!-- 子组件 -->
<h2>这是子组件</h2>
<button @click="sendToParent">向父组件发消息</button>
</div>
</template>
<script>
let child = {
template: '#child',
data() {
return {
