VUE（一）组件之间的通信

一、 父级向子集传递参数

父组件关键代码

<template>
    <Child :child="msg"></Child>
</template>

子组件关键代码

export default {
  name: 'child',
  props: {
    child: String
  }
};

props 负责接收父组件传递的参数，父组件中的：child是传递到子组件props的参数

二、 子组件调用父组件

子组件关键代码
$emit
子组件中某函数内发送事件：

this.$emit('toparentevent', 'data');

toparentevent是传递到父组件的方法名，data是传递的参数，至于父组件怎么接收 往下看

父组件关键代码

<template>
    <Child :child="msg" @toparentevent="todo()"></Child>
</template>

toparentevent 为子组件自定义发送事件名称，父组件中@toparentevent为监听事件，todo为父组件处理方法。

三、父组件直接获取子组件属性或方法

给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值。

<!-- 子组件。 ref的值是组件引用的名称 -->
<template>
    <Child :child="msg" @toparentevent="todo()" ref="Name"></Child>
</template>

父组件中通过 $refs.组件名 来获得子组件，也就可以调用子组件的属性和方法了。

var child = this.$refs.Name
child.属性
child.方法()