vue 父组件调用子组件方法

最近项目中用到的父子组件间的调用挺频繁的，整理下，方便以后查找。

可能会出现的问题：

子组件发送请求时会出现 billDate 没有更新的情况。

查了下官网，可以使用 nextTick ： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以获取更新后的 DOM。

更详细的介绍： 异步更新队列 。

so, changeDate 里这样写就好了：

原因是父组件请求数据时,子组件已经渲染完毕,这个时候传了一个空数组给子组件子,子组件用到父组件传过来的值而出现的报错

解决办法:

1 给子组件添加一个渲染条件,有值的时候在渲染

2 使用watch监听,数据变化时动态更新数据

3 把数据存储到vuex 读取vuex里面的数据

4 通过ref 直接给组件赋值,不过这已经是在 *** 作dom了(不建议使用)

通过ref来获取页面上的dom

若在一个组件<item>中添加上ref，那么获取到的dom就是对应的组件，也就是可以获取到组件的引用。

可以获取到组件中定义的data数据

父组件传值给子组件通过属性来传。

过来的值赋值给定义的值，然后修改那个值

子组件通过事件触发来向父组件传值

定义一个全局组件

父组件给子组件通过属性传递一些值，而子组件做的一些约束就是组件的参数校验

父组件要传一个名叫content的属性，而子组件刚好定义了content的prop，这个就是props特性

非props特性

例如：给子组件的标签中定义一个click事件

上面的实现是错误的，原因就是在子组件中定义的@click中的click是监听的自定义事件的名称，它是接收子组件触发的事件名称，如：this$emit('click')，@click是接收这样的事件的，并不是我们熟知的点击事件

实现上面的例子

方法一：

方法二

在click中添加native就可标明为原生事件

方法一，使用Vuex

方法二，使用发布订阅模式，也称为总线机制

怎么使父组件给子组件优雅的传递dom，例如父组件要给子组件传递<p>Dell</p>

按以往的方法应该是

使用slot可以解决问题

如果template中有多个<slot>，那怎么确定哪个slot要那些dom呢

可以通过名称来确定对应的dom，如

通过动态组件来怎么实现呢

切换的时候，每次都是先销毁，然后再创建子组件，每次切换都销毁和创建

v-once就是为了避免这种情况的发生，使用v-once第一次展示的时候，会将组件放到内存中，第二次就不需要创建组件了，可以直接从内存中读取到

参考

Vuejs API文档

慕课网：Vue25开发去哪儿网App 从零基础入门到实战项目

“阿弥陀佛，善哉善哉。”

“魔镜啊！魔镜，谁是这世界上最美丽的女人？”

“愿上帝保佑你，阿门！”

等等，这些语句是不是特别经典？特别有画面感？眼前立马浮现出家人、后母和牧师？

通过言语，可以判断一个人的职业、身份、地位。

通过特殊语句可以与神明通话，可以和精灵共舞。

（1）props / $emit 适用 父子组件通信

父组件注入，子组件接收。

这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

注意：props是单向数据流，既只能从父级传到子级，如果想要达到双向，子级能够修改父级，则需要给props加sync修饰符。(文章后部分有详细介绍)

（2）ref 与 $parent / $children 适用 父子组件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

$parent / $children：访问父 / 子实例

（3）$attrs / $listeners 适用于 隔代组件通信

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。

当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners：包含了父作用域中的 (不含 native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

（4）provide / inject 适用于 隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（5）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（6）Vuex 适用于 父子、隔代、兄弟组件通信

Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

vuex的详细使用方法： vuex管理状态仓库使用详解

Vue 组件间通信是面试常考的知识点之一，这题有点类似于开放题，你知道的回答出越多方法越加分，表明你对 Vue 掌握的越熟练。

举例props使用

avue 引用了一个detail组件

详解eventBus通信方法

第一步：首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。

两个初始化事件中心的方法：

第二步：创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。

假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想通知 B页面。

接下来，我们需要在 B页面 中接收这则消息。

同理我们也可以在 B页面 向 A页面 发送消息。这里主要用到的两个方法：

如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复 *** 作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。

如果想移除事件的监听，可以像下面这样 *** 作：

$on事件是不会自动清楚销毁的，需要我们手动来销毁，否则在b组件每次加载一次就会创建一个监听，会重复监听到数据。

可以使用EventBus$off('aMsg')来移除应用内所有对此某个事件的监听。

或者直接调用EventBus$off()来移除所有事件频道，不需要添加任何参数 。

总结： 所以，如果想要用bus 来进行页面组件之间的数据传递，需要注意两点，组件A$emit事件应在beforeDestory生命周期内。其次，组件B内的$on记得要销毁。

使用deep 属性，找到子组件里的选择器直接修改即可生效。

对于表单项很多每个form-item 会根据条件展示，每行最对展示两个item的情况，需要使用flex 布局。当有item 项 不展示，后面的可以自动填补空位。

比手写处理时间方便多了。。。

momentjs 搜索栏获取最近一周，一个月，三个月，半年，一年时间

momentjs使用方法总结

在项目中使用，比如获取上上个月，最近三个月，最近一年：

使用：

第三方组件官网

Element-ui

iView

Vant

如果父类组件需要直接获取子类的方法 可以使用 $children

子获父 $parent 子获取跟组件 $root

如果使用自定义组件，在里面插入其他的文字或者标签，是不能够显示的，如果想在组件中插入其他标签，需要在标签中插入 <slot></slot> ,插槽写在哪个位置，插入的文字或者标签，就在哪个位置显示

我们先定义3个 全局 的自定义组件 分别为 child1 child2 child3

我们把vue实例当作根组件（父组件）

父跟子的关系

通常情况下，在父组件中有个子组件，子组件想要使用（获取）父组件的值，我们使用 $parent 来获取父组件的的值

我们在 child1 子组件中插入了一个组件这个时候 child1 变成了 childson 的父组件，如果这个时候我们在获取根组件（vue实例 | 根实例），这个时候我们可以用多个 $parent 来获取祖组件数据，当然，我们可以用 $root 直接获取根实例的值

父组件获取子组件的值，我们用 $children 来获取，

$children 获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件

如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。：

如下