组件化答题页面

初衷:

    后台实际化——结合后台操作,面向实际需求

    组件实际化——使在网页的任意位置只要加入一个标签就可以引入到页面实现该块功能(跨页面引入时,现在看来比较绕的传值操作显得有用起来),即页面组件化


整个页面为父组件。

----------------------------------------------

答题卡子组件(封装题号功能):

【  index的传入(当前题目所在的位置)和传出(目标题目所在的位置,传出后父组件做跳转(自动传递给其他子组件做题目号更新))  】

因为父子组件间数据单向,即如:父的index改变则子的index自动改变(已经v-bind了),子的index改变则父的index不自动改变,需要return,return后就可以自动改变了

----------------------------------------------
题目子组件(封装答题功能区(题目类型、题干、选项))

【  dataList(是一个对象类型)的传入(准备答题数据)和传出(传出答题数据)  】

题目子组件里的方法(每次对一个题做出答案时的方法)修改dataList里的answer参数,然后答完题后将dataList整体传出,等待之后其他功能组件来提交到服务器

----------------------------------------------

提交子组件(封装提交功能):

【  dataList传入后,在本组件的方法内直接提交给服务器,不涉及dataList的传出  】


组件分离到其他页面

    https://blog.csdn.net/u011175079/article/details/79161029

    https://www.cnblogs.com/daiwenru/p/6694530.html

vue CLI

redux改善tamplate


注意:

【1】最外层父组件(即整个页面)与其直接子组件之间不需要在父组件里声明子组件,但当前子组件与其直接自组件之间就开始需要在父组件内部声明子组件了。

 

你可能感兴趣的:(vue)