今天若米知识就给我们广大朋友来聊聊vue子组件调用父组件方法,以下关于观点希望能帮助到您找到想要的答案。
vue 子父组件相互调用的方法 2018-11-09
答以下内容只是我个人学习时的记录，可能与实际有偏差，勿怪
1传值（父传子）
父组件给子组件传值 借助 props
父组件：
传一个叫做 put_child 的变量给子组件
子组件：
子组件在 props 中定义接受的变量，然后就能使用
2传值（子传父）
子组件给父组件传值，通过 $emit
父组件：
在父组件中绑定一个属性,同时定义一个方法接受，子组件发送过来的数据
子组件：
调用 $emit 传给父组件上绑定的属性，剩下的就是父组件处理了
3.调用方法(子调父)
目前只掌握了，同$emit传值给父一样,同上这里就不写出了
4.调用方法(父用子)
父组件：
在父组件中 ref 属性 定义一个变量，当我使用 this.$refs.变量 会把子组件对象返回，这样我们就可以调用子组件的方法
VUE从入门到入坑—06. 父子组件通信 / 几种常用的第三方组件库
答 1.父组件向子组件传递数据
(1)$parent方法，在子组件中可以直接访问该组件的父实例或组件。
(2)$root方法，获取根组件对象。
2.子组件向父组件传递数据
$children：返回的是所有子组件对象的数组，再通过下标获取指定的子组件。当组件顺序不会发生变化时，用 $children；否则用 $refs。 注意 ：$refs：返回的是一个对象，对象中包含所有带有ref属性的子组件。 注意：不是只有组件才可以添加ref属性，任何标签都可以加ref属性 。
注意 ：在父组件创建完成到挂载完成之间，包含完整的子组件的生命周期。父级组件在mounted生命周期函数内，才能获取到$children信息；在子组件的created生命周期函数中，可以获取到父组件的数据。顺序：父级created => 子级1created => 子级2created => => 子级1mounted => 子级2mounted => 父级mounted
常用的PC端组件库有： element-ui 、 iView 、 ant-design vue
常用的移动端组件库： Vant 、 Mint-ui
注意 ：第三方组件库，必须在Vue的下面引入
效果：
注意 *：非 template/render 模式下，一些组件名在实际使用中需使用 i-小写组件名 格式（例如 Button组件 需使用 i-button）；一些组件标签名需要改成小写（例如 Tabs组件 需使用 tabs ）。具体情况参考官网提示。
效果：
效果：
vue 组件通信方式 ，父子、隔代、兄弟 三类通信，六种方法
答Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。
父组件注入，子组件接收。
这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。
ref ：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children ：访问父 / 子实例
$attrs： 包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
$listeners ：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
vuex的详细使用方法： vuex管理状态仓库使用详解
a.vue 引用了一个detail组件
第一步：首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。
两个初始化事件中心的方法：
第二步：创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。
假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想通知 B页面。
接下来，我们需要在 B页面 中接收这则消息。
同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法：
如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。
如果想移除事件的监听，可以像下面这样操作：
$on 事件是不会自动清楚销毁的，需要我们手动来销毁，否则在b组件每次加载一次就会创建一个监听，会重复监听到数据。
可以使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听。
或者直接调用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数 。
因为页面跳转的时候 ，a页面在之前已经emit了，但是b页面首次并没有created，b页面还监听不到。
可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候，B页面组件已经被created了，也就是我们写的$on事件已经可以触发了
所以可以，在beforeDestory的时候，$emit事件。例如：
【参考eventbus实战记录： 】
vue+父子组件vue-echarts,子组件怎么向父组件传值？
答在 Vue 中，子组件向父组件传值可以通过自定义事件和父组件监听子组件触发的事件来实现。
下面是一个示例，展示了子组件向父组件传递数据的方法：
父组件：
```vue
<template>
<div>
<h1>父组件</h1>
<p>子组件传递的值: {{ childData }}</p>
<ChildComponent @childEvent="handleChildEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
childData: ''
};
},
methods: {
handleChildEvent(data) {
this.childData = data;
}
}
}
</script>
```
子组件：
```vue
<template>
<div>
<h2>子组件</h2>
<button @click="sendData">传递数据给父组件</button>
</div>
</template>
<script>
export default {
methods: {
sendData() {
const data = 'Hello, Parent!';
this.$emit('childEvent', data);
}
}
}
</script>
```
在上述示例中，父组件通过在子组件标签上使用 `@childEvent` 监听自定义事件 `childEvent`，并在触发时调用 `handleChildEvent` 方法来接收传递的数据。子组件在按钮的点击事件中，通过 `this.$emit('childEvent', data)` 来触发自定义事件，并传递数据给父组件。
当子组件触发自定义事件时，父组件的 `handleChildEvent` 方法会被调用，并将子组件传递的数据赋值给 `childData` 数据属性。父组件可以在模板中直接使用 `childData` 来显示子组件传递的值。
通过这种方式，子组件可以将数据传递给父组件，实现组件间的通信。
接受生活中的风雨，时光匆匆流去，留下的是风雨过后的经历，那时我们可以让自己的心灵得到另一种安慰。所以遇到说明问题我们可以积极的去寻找解决的方法，时刻告诉自己没有什么难过的坎。若米知识关于vue子组件调用父组件方法就整理到这了。
