VUE中父子组件之间传值方法、方法调用案例

父子组件传值案例

这是一个简单的父子组件之间传值的案例，不多说，直接看效果和实现方式吧（样式部分我就不贴了）：

效果

我将上面的input和下面的表格进行拆分为两个组件（inputs和tables）

父组件

在父组件中，有两个子组件，一个是inputs，一个是tables，具体效果可以直接看最后，可以回忆一下，如何将一个子组件引用到父组件上来。。。。。。（import、components、</>）

在父组件中有个peoplesData，就是通过inputs添加到列表中的数据，Dels()是删除列表中当前行的数据，creatP()当然就是添加数据了，这些方法都在父组件中，看看子组建如何调用：

子组件inputs

子组件inputs里是个form表单，里面是两个input：Name、age以及一个add按钮。这里用到了双向绑定（v-model），回忆一下怎么用的吧。
主要看看里面add按钮的creatP方法，通过this.$emit向父组件传值，到这你可以往上看看父组件中调用inputs的时候都写了什么，是不是@creatP，那这个就是这个子组件传过去的方法，再看父组件中的如何用这个方法：creatP(val)，那这个val又是什么呢？其实就是子组件中的this.creatPeople,这个在子组件中是个对象，里面有Name和age，当然你可以添加任何值，这样我们是不是在父组件就拿到了子组件中的值。拿到以后我们要在下面列表中展示，那我们是不是应该要存起来，然后用到tables里，所以，在父组件中就有了peoples:[]，这个是个数组，那我们现在去看看tables组件吧。

子组件tables

这个组件里，就是一个table，首先看v-if='peoplesData.length > 0’这个（v-if，v-show，回忆一下是干嘛的，怎么用），我是想有数据的时候展示这个表格，没有就不展示。
thead表格的表头部分，有四列：序号、姓名、年龄、操作
ok，下面就需要去循环展示出列表数据了，数据从哪来呢，我们刚刚是不是在父组件中存了这个数据啊（peoplesData），ok，通过props: {peoplesData:Array },拿过来，这个地方呢往上看看父组件中引用tables的时候怎么写的***************（不要拉了，直接看这儿吧：<tables :peoplesData=“peoples” @Dels=‘Dels’ />），拿到数据以后就通过v-for循环展示了，<tr v-for=’(item,index) in peoplesData’ :key=‘index’>（回忆v-for，为什么要写：key，这个key为什么要拿index，能不能拿别的值，能不能重复？，v-for和v-if能不能放一起用，哪个优先级高？）***回忆完了继续往下看看前三列是如何拿到对应的值的（**{{}}**插值还记得吗？v-text？v-html？能想的到的就尽量回想一下吧，比如v-once，keep-alive看看能不能在这个地方用进去😂还有，看看下面的data里的return是空的，这个时候这个return能不能不写？）！！！！!

OK，咱们继续，该说到删除数据了，每一列后面都有个删除按钮，可以直接删除当前列数据（<button class=“Del” @click='Dels(index)’>Del）：

看看Dels():this.$emit(‘Dels’,index),是不是要回到父组件看啦？向父组件传了什么值，是不是Dels()和index？

ok，我们回到父组件看这个方法：
this.peoples.splice(index,1)

好啦，我就不需要多说了，自己去试试吧？