Vue-cli + jQuery框架实现无限递归评论和无限递归回复功能

继上一次码博——讨论如何用Vue实现评论与回复相关功能之后的重现

• 往下看，有彩蛋 ?
• 准备环境：前端开发工具：随意；前端框架： Vue-cli@Any Version + jQuery Plugin
• Vue-cli安装步骤：Vue-cli安装说明以及Vue相关组件也在这里——Click here
• Introduction：共2个组件组成并实现该功能，组件A也是父组件：是一个 Modal，因此在使用时需要会使用Modal组件；组件B也是子组件，普通template嵌套div；
• 我对Vue的理解：首先Vue-cli有两个我认为对实现该功能起到很大帮助的特性： ①数据可以双向绑定特性；②可以自定义组件特性；但是也有令人头疼的地方：① 无法对遍历出来的某一个标签本身进行操作，比如隐藏和显示（我的知识有限），所以我选择和jQ搭配使用；② 标签中可以使用“:value”和“v-model”等很优秀的组件，但是对于初学者，会看上去一脸懵逼，而且碰上大项目，如果不采用自定义组件的方式来拆分大量代码，会让整个模块看起来一团糟。
• 实现思路：父子组件递归遍历存放评论内容的集合，假设集合是这样的

  [{
  id: 'uuid1234567890',
  commentator: 'Steve',
  commentContent: 'What are you doing recently, Mask?',
  time: '2019-07-07 12:00:00',
  reply: [{
     id: 'uuid1334567890',
     commentator: 'Mask',
     commentContent: 'I've been making rockets since you left',
     time: '2019-07-07 12:10:00',
     reply: [
        id: 'uuid1335567890',
        commentator: 'Celine Dion',
        commentContent: 'What an ingenious person you are, Mask?',
        time: '2019-07-07 12:00:00',
        reply: []
      }]
    }]
  },
  {
  id: uuid2234567890,
  commentator: '小马',
  commentContent: '老胡最近在弄啥子?',
  time: '2019-07-07 12:00:00',
  reply: [{
     id: 'uuid2244567890',
     commentator: '坤哥',
     commentContent: '敲代码，一天天地敲键盘！',
     time: '2019-07-07 12:10:00',
     reply: [
        id: uuid2245567890,
        commentator: '小语',
        commentContent: '我们前端要和你们后台对接了，长点心！',
        time: '2019-07-07 12:00:00',
        reply: []
      }]
    }]
  },]

  首先：1）父组件遍历集合的第一层，并展示第一层的评论信息；2）创建子组件：子组件的代码大致和父组件的代码差不多；3）在父组件的v-for内评论区下方嵌套引入子组件；4）子组件增加props: {replies: Array, who: String}, 这个对象参数很关键，它是父子组件传递参数的媒介；5）发表评论的按钮在父组件中，而递归的很深的回复内容则在子组件中，怎么能把1层楼的25Kg的哑铃拿到15层楼上去？一次性搬上去显然体能不达标；用绳子，也不行，楼梯缝太窄；不如传递，一周的时间每天下班回来时传递两层，这样下周一下班（997）就可以锻炼了；所以，无论递归到几层，参数都是要一层一层的传递，最后到父级组件，而传到父组件的内容并不是评论的内容，而是要回复的那个评论的对象，这样根据Vue数据双向绑定原理，即可将父组件中的回复内容插入（push）到子组件传递过来的对象。6）父组件引用子组件，子组件则需要引自己，因此子组件相对于它自己而言也是父组件。子组件的子组件传递过来的参数，还要通过$emit()函数来传递给顶层组件，最后才能添加评论。

• 思维导图：

父组件的部分代码如下：

• 子组件的代码如下

•  下面是图片示例

 

• 结语：写了几个小时，真的不容易。不过想想实现了这个功能，也是莫大的欣慰。如果你正在踌躇于某个功能未实现，千万不要放弃，放松一下自己，然后再回来解决问题。