问题:使用vue框架进行开发,UI使用ElementUI,遇到需要将一个弹出框中的内容整个做成一个组件来实现复用。
解决思路
将这个弹出框做成一个组件,弹出框的标题这里使用父组件向子组件传递。然后将在弹出框中选中的数据返回到父组件,这里涉及到子组件向父组件传值。
步骤:
一、父组件向子组件通信 首先在子组件中写好需要父组件传递的参数 这里可以直接将子组件弹出框的标题赋值为title,titleDataSys是子组件弹出框的标题。 然后编写子组件弹出框的展示函数 到这里子组件的准备工作就结束了,接下来就是父组件使用子组件并传一个title的值。 在父组件中使用构造该组件 在template中引用该组件 这里一定要写ref属性,然后在点击弹出框的函数中调用子组件的展示函数来打开弹出框(子组件),这样就打开了。 这里要注意,show方法是子组件的,父组件通过reds来调用子组件的函数,如果子组件没有该函数,控制台会报函数不存在错误
二、子组件向父组件通信 在子组件弹出框中有数据要传给父组件时,通过$emit返回数据。比如,我在弹出框中选中了一些数据,然后要返回给父组件,可以在弹出框的按钮函数中返回。 childFn相当于是一个自定义函数,在父节点中可以通过@childFn进行使用。 在parentFn(随便定义的)函数中取出数据 这样子组件的数据就到父组件中了。
声明:本人新手程序猿,这里博客都是在开发学习过程中遇到问题的自我总结,仅供参考!