我当前写的这个项目关于父子组件拆离的需求是，在父组件即主页面上的按钮会触发新dialog弹框页面，即子页面，我需要将dialog弹框子页面单独写一个子组件里，以便维护和代码重用；步骤如下：
- 新建一个vue子组件，将dialog弹框中需要写的内容用代码完成；并将该子组件引入到父组件中，
在父组件的script中注册子组件；
在父组件template中使用子组件：
2.在父组件需要触发dialog框的按钮上绑定触发方法：
3.在script脚本中写触发方法：
// 新增按钮
add () {
console.log()
this.$nextTick(() => {
this.$refs.childComponent.add()
})
},
// 编辑按钮
handleEdit () {
if (this.multipleSelection.length === 1) {
this.selectId = this.multipleSelection[0].companyid
console.log(this.selectId)
console.log('下面长度')
console.log(this.multipleSelection.length)
// 执行调用子组件
this.$nextTick(() => {
this.$refs.childComponent.handleEdit(this.selectId)
})
} else {
alert('请选择一条记录进行操作！')
}
},
4.注意知识点：在父组件使用子组件时，标签上的两个属性：
第一个是：ref="contactMaintenance" ref上绑定的是给子组件起的唯一别名，在父组件中的触发子组件函数中需要用这个子组件别名来指向子组件中的触发函数；如：
就是父组件在调用该childcomponent所代表的的子组件，即在上面使用自组建中新增子组件里绑定的那个名称，调用的是子组件中的add方法；
第二个是子组件调用父组件中的方法：@refparentDataList="getData"，调用的是父组件中的getData初始化数据的方法函数；其中@refparentDataList里的ref后面的是代表父组件的别名（也是同子组件别名一样随意起的，但要有代表意义），在子组件方法中调用父组件的方法时需要用到这个父组件别名：子组件调用父组件方法如图：
子调用父的方法函数时写法固定为：this.$emit('refparentDataList')
父调用子的方法函数时写法固定为：
this.$nextTick(() => {
this.$refs.childComponent.handleEdit(this.selectId)
})里面的那句话；
父子组件相互调用的路径入口：
温馨提示：
我，作为一个神奇的喵系女孩，虽然反射弧稍微迟缓的长那么一点点，但，我必定是一只不容置疑的程序媛大佬！
你可以嘲笑我技术菜，但，你必须告诉我哪里错了，为什么错？
安静的等待本媛的下一篇实习总结吧！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
