写Vue页面思路

写Vue页面思路

1. 先写网络请求

   /**
    * 查询素材问题列表(分页)
    */
   export const requestConceptsConflictSelectLimit = (params = {}, data = {}) => {
     return request({
       url: SERVICE_KEY + "/baseConceptsConflict/limitlist",
       params,
       method: "post",
       data
     });
   };
   

   2.主页面布局,导入网络请求

   <template>
     <HeaderComp :item="item" title="素材问题列表" class="comp">
       素材问题列表
     </HeaderComp>
   </template>
   
   <script>
   import HeaderComp from "@/components/webProtege/components/Header";
   import CompMixin from "@/mixins/CompMixin.js";
   
   export default {
     components: {
       HeaderComp
     },
     mixins: [CompMixin],
     inject: ["config"],
     data() {
       return {};
     }
   };
   </script>
   
   

   3.export default结构说明

   <script>
   
   import Confirm from '../sub/Confirm';
   export default {
           name : "First",
           // components 组件注册
           components: {
               Confirm
           },
           // 注册属性
           props: {
               name: {
                   type: String,
                   default: "父组件"
               },
           },
           created() {
               // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
           },
           mounted() {
               // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
           },
           // data() 为变量赋值等
           data() {
               return {
                   msg: "Welcom to FirstApp"
               };
           },
           // methods 编写js函数
           methods: {
               getMessage(val) {
                   alert(val);
               }
           }
   }
   
   </script>
   

   4.子组件

   //使用
   <ProgramList
         :item="item"
         :data="conceptsConflictData"
         type="comp"
         @reload="handleReload"
         @languageChange="handleLanguageChange"
       />
   
   
   <script>
       //导入
   	import ProgramList from "@/view/keyword/components/materialThesaurus/MaterialProblem/ProgramList.vue";
   </script>
   
   
   

   5.值的绑定

   //父组件页面
   <script>
   export default {
       components: {},
       data:{
           //与子组件数据绑定
           conceptsConflictData: {}, 
       },
       mounted() {
           //页面加载后执行
      		this.handleReload();
     	},
     	methods: {
           //加载被调用
           handleReload() {
         		this.requestConceptsConflictSelectLimit();
      		},
           //发送网络请求,传递参数
           async requestConceptsConflictSelectLimit(item) {
             const res = await requestConceptsConflictSelectLimit({
               ...item,
               vocid: this.pageinfo.vocid,
               language: this.pageinfo.language,
               page: this.pageinfo.page,
               limit: this.pageinfo.limit
             });
             //值绑定
             this.conceptsConflictData = res.data;
             this.total = Number(res.data.page.total);
             this.page = Number(res.data.page.page);
             this.pages = Number(res.data.page.pages);
           },
       }
   
   }
   </script>
   
   //子组件页面
   //查询请求后参数接收
   <script>
       export default {
           watch: {
           props: {},
           data: {
             immediate: true,
             //核心
             handler(data) {
               this.list = data.list;
               this.language = data.language;
               if (typeof data.page !== "undefined") {
                 this.total = data.page.total;
               }
             }
           }
         },
       }
   </script>
   

   6. 子组件给父组件传值

   //子组件代码
   methods: {
    // 语言选择下拉框触发事件
    handleCommand() {
      this.$emit("languageChange", this.language);
    },
   }
   
   

   
   //父组件
   <ProgramList
         :item="item"
         :data="conceptsConflictData"
         type="comp"
         @reload="handleReload"
         @languageChange="handleLanguageChange"   //核心
       />
   
   
   
   
   <script>
   export default {
       methods: {
           // 接受子组件的传值
           handleLanguageChange(data) {
             this.pageinfo.language = data;
             this.pageinfo.page = 1;
             this.requestConceptsConflictSelectLimit();
           },
    }
   }
   </script>