Vue：将以往的JQ页面，重构成Vue组件页面的大致思路梳理(组件化编码大致流程)

本文主要是介绍Vue：将以往的JQ页面，重构成Vue组件页面的大致思路梳理(组件化编码大致流程)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、实现静态组件

组件要按照功能点拆分，命名不要与HTML元素冲突。

• 1、根据UI提供的原型图，进行结构设计，结构设计的粒度以是否方便给组件起名字为依据。并梳理好对应组件的层级依赖关系。

• 2、设计好结构后，开始写对应的组件，并根据梳理好的层级关系，对应引入组件。

• 3、根据UI提供的静态HTML、CSS代码，进行模版结构的拆分以及组件标签的替换。并同时调试效果。

  3.1)、把HTML中的body里面的div内容，直接全部拷贝到App.vue组件中。

  3.2)、把CSS中的样式代码，全部拷贝到App.vue组件中。

  3.3)、利用浏览器F12查看相应结构对应的div，然后，将该div剪切到对应的组件template区域。并将App.vue中对应的div替换成vue组件标签。其他结构以此类推。直到所有结构拆分完毕。

  3.4)、将对应CSS代码，剪切到对应组件的style区域。

二、实现动态组件

• 1、数据的类型和名称怎么定义？
  这个最好和DB表结构设计的字段保持一致，会省去很多麻烦事。
  原则：一堆数据用数组存，每条数据用对象存。
  例如：
  
• 2、数据与组件的对应关系，即该块数据应该展示在哪个组件里？
  1)、一个组件使用：放在组件自身即可。
  2)、多个组件共同使用：放在他们共同的父组件上（状态提升）。

三、实现交互（待补充）

• 首先，绑定事件。

  比如@click、@change、@keyup等等事件。
  然后，给对应的事件编写具体的函数逻辑。
  这就是交互逻辑。

• 其次，组件间通信。
  数据、事件函数等在各组件间如何通信？

  基础方式：使用props属性进行通信。
  (1).父组件 ==> 子组件 通信
  (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

这篇关于Vue：将以往的JQ页面，重构成Vue组件页面的大致思路梳理(组件化编码大致流程)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---