先上效果图：

用户点击到文本框内即可查看Guss的详情

 

 

 

 

 这是el-dialog里面套着一个el-dialog，我去年写过一篇博客是使用ifame标签来实现el-dialog里面嵌套一个div的，随着开发经验增加。。。发现用组件化即可很完美的解决dialog里面嵌套dialog的问题。

请务必注意！dialog的放置位置！

 

 在这个Guss的父组件就是图中阴影部分加入上述代码（如果需要引用组件，在底下注册就行）

 

 上一下Guss评分的代码：

 

 

 

这里需要注意的是！这个isGussShow对象！接下来是isGussShow的定义和showGuess函数详情：

 

 由于是子组件，vue规定子组件的变量必须在data（）函数里面！

 

 因为返回给父组件的只是子组件的一份拷贝，接下来showGuess函数是最关键的！

 

 

这里务必注意！！！要提取这个this!!!如果不懂js中this用法的可以去看我的另一篇博客：

https://www.cnblogs.com/jyj666/p/14628535.html

 

 这里的isGuessShow是vue对象里的一个属性！如果你不获取此时的this那么你改变这里isGuessShow的值，上面那个dialog是不会显示出来的！！！

最后再提一点，组件传值记得小写，大写识别不了。（就是这里的assessment之类的）