Vue入门之自定义事件$emit-父组件获取子组件的数据

前面讲过通过props子组件很容易就可以获取到父组件的数据，但是父组件怎么获取子组件的数据呢？通过查资料，发现可以通过自定义事件来实现父组件与子组件之间的通信。

首先，得创建一个子组件模板文件，子组件在父组件中用的时候，总得有个触发动作可以获取到子组件的数据吧，所以，加个按钮，触发个动作。如下所示：

Appvue

一般来说，组件的 v-model 都是简单类型，不会有对象类型的。

只是我这几天不是在封装表单控件嘛，既然都封装了，那么表单控件的v-model显然需要是一个对象了，否则数据怎么传递呢？

但是出了点小问题。

一般的做法是，外面设置一个 v-model ，然后组件内部用 emit('update:modelValue', xxx) 来返回v-model的值。

对于简单类型肯定是没用问题的，但是如果是对象呢？

先试了一下reactive，发现“收不到”返回值，换成ref就可以了。

这个也好解释，因为reactive不能直接赋值，但是似乎又哪里不对的样子。

设置断点跟踪了一下 emit('update:modelValue', xxx) ，然后……绕晕了，水平有限看不懂。

如果对别人说，我封装的这个表单控件，只能用ref的，是不是有点怪异。

那么直接修改属性值呢？

这个其实在组件里面是 可以做到的，尤其是对于对象类型，更是有很多种方法。

最简单的就是，做一个js文件，里面写个函数，把props作为参数传递进来，然后就可以“为所欲为”了。

当然也不是直接用属性，而是这样

就是把原来应该用 emit 的地方，换成了 Objectassign的方式。

话说，反正都是返回数据给 v-model，那么为啥不能直接一点呢？

传值传来传去的有点晕。虽然用了vuex，关键是 v-model 到底要如何设置才更合理呢？

1我们最终需要的对象形式为：

我们需要渲染的对象 为一个26个字母为key值，数组为value值的对象

3获取后台数据 ，然后利用for循环生成我们以26个字母为key值，数组为value值的对象

4最后获得的对象打印出来为

6子组件 在created 中打印这个对象

7但是页面没有东西渲染出来

最后 我换了一个写法

我把 直接写在接口成功获得 26个字母数组的对象的逻辑 单独封装了 然后把得到的结果返回出去

总结： 应该是和 vue 的数组 和对象 在改变的时候 应该调用它的this$set的方法 页面才会同步刷新，所以 刚开始我们没有用这个方法 ，所以 页面没有同步刷新

单独封装的方法 放回的是一个新的对象 再用复制的方法，改变的是内存地址，所以数据也跟着刷新了

第三方组件官网

Element-ui

iView

Vant

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

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

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

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

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

父跟子的关系

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

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

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

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

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

如下