最近项目中又需要用到父子组件,用了很多次之后对父子组件终于有种从善如流的感觉。会了之后再看自己写的父子组件传值的文章,感觉还是存在很多问题的,问题就不改了,在这篇文章做个总结和纠正吧。
父子组件就是在一个vue文件中引入另一个vue文件。被引入的vue文件是子组件,引入vue文件的vue文件是父组件。
1.父组件引入子组件
import引入,components调用。
import ZwFjdjForm from '../../../specialbond/modules/ZwFjdjForm'
components: {
ZwFjdjForm
},
在需要调用子组件的地方调用
<ZwFjdjForm ref="ZwFjdjForm" :currentId="currentId" :canModify="canModify" ></ZwFjdjForm>
这样子组件就被成功调用了。但是在很多情况下,我们需要父子组件互相传值
2.父组件给子组件传值
父组件 在引用子组件时,通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据,传递到子组件内部,供子组件使用 。
:子组件接收父组件数据的元素="父组件传递的值"
这样,父组件中的数据,就成功传给子组件了。
3.子组件接收父组件传来的值
在之前的文章中,我说的是使用props接收,如下格式。
这个格式是可以使用的。但是后来我说过一个问题,遇到一个项目,需要调用子组件,而我需要在子组件里调用方法。之前想的是只传id,id传过去之后在子组件调用方法。当时是失败了,结论是子组件会在页面加载之前调用,所以后来是把方法写在父组件了。
这次遇到的也是一样的问题,但是这次成功了。
子组件是这样接收父组件的值的。
props:['canModify','currentId'],
这样是可以把id传给子组件,子组件再调用接口的,不太懂两者有什么区别。
4.子组件将值传给父组件
使用this.$emit('方法名',准备传给父组件的值)直接传
this.$emit('startDateChange',mode)//向父级组件传递参数
5.父组件接收子组件传来的值
调用方法接收
<a-tab-pane tab="基本情况" :key="refKeys[0]" :forceRender="true">
<zw-mhk-zxzq-jbqk-form ref="zwMhkZxzqJbqkForm" :canModify="canModify" @startDateChange="startDateChange" ></zw-mhk-zxzq-jbqk-form>
</a-tab-pane>
startDateChange(data){
this.changedStartDate = data
}
这样父组件就取到了子组件传来的值
6.父组件直接调用子组件的方法
startDateChange(data){
this.$refs.zwMhkZxzqSzysForm.getDate(data)
},
直接$refs.子组件.子组件的方法
关于父子组件的内容,在这里也算做了个完善了,希望以后父子组件不要再出现问题了。
之前写的父子组件传值文章:
vue父子组件传值_芝士焗红薯的博客-CSDN博客_父子组件传值