父组件调用子组件方法
关键字：$refs 是一个对象，持有注册过的 ref 特性的所有DOM元素和组件实例
子组件，如下代码不用做任何特殊处理：
child.vue
<template>
<div>
<h1>I am child</h1>
</div>
</template>
<script>
export default {
name: "child",
methods: {
child: function () {
alert("I am child");
}
}
}
</script>
父组件：
parents.vue
<template>
<div>
<el-button @click="demo01">调用子组件方法</el-button>
<child-com ref="getChild"></child-com>
</div>
</template>
<script>
import childCom from './child'
export default {
components: {childCom},
name: "parents",
methods: {
demo01: function () {
this.$refs.getChild.child();
}
}
}
</script>
父组件中，我们通过import 导入子组件后，如果想用子组件提供的方法，我们需要再子组件中 加入 ref='xxx' xxx仅仅是个占位符名称随意。 然后编写方法调用子组件方法。 直接通过this.$refs.占位符.子组件方法名() 调用。
子组件调用父组件方法
关键字：$emit 触发当前实例上的事件。附加参数都会传给监听器回调。
我们先看父组件。编写了自己的parents() 方法外，引用了子组件。 为了能让 parents()方法能被child子组件待用，需要在Dom节点上添加 @xxx="parents()"。 其中xxx为子组件调用时使用的名称。 parents()就是父组件的方法。
parents.vue
<template>
<div>
<child-com @par="parents"></child-com>
</div>
</template>
<script>
import childCom from './child'
export default {
components: {childCom},
name: "parents",
methods: {
parents: function (parameter) {
alert(`I am ${parameter}`);
}
}
}
</script>
<style scoped>
</style>
子组件代码如下，需要添加调用父组件方法，并在该方法下通过this.$emit('xxx', 'parameter')调用父组件方法。 其中xxx为父组件给子组件提供的占位符，parameter为父组件方法的参数。
child.vue
<template>
<div>
<el-button @click="childM">调用父组件方法</el-button>
<h1>I am child</h1>
</div>
</template>
<script>
export default {
name: "child",
methods: {
childM:function () {
this.$emit('par', 'meyoung')
}
}
}
</script>
