Frequently Asked Questions of Vue (Summary of Vue Development Mobile Problems 1)

vue FAQ

1. vue_webpack_imported_moudle_70_.default.conponent is not a function

   vue_webpack_imported_moudle_70_.default.conponent is not a function
   ​
   The solution to this problem in the package component: The reason is that the word in vue.component... is misspelled. If the problem is not found, you can directly copy the "XXX" in "XXX" is not a function to your own code Query issues in

2. Invalid prop: type check failed for prop "value". Expected Array, got Object类似问题

   Invalid prop: type check failed for prop "value". Expected Array, got Object
   ​
   The reason is that the type that should be bound when binding data or when passing a value is inconsistent with the type obtained. For example, my error is that the data type I want to obtain is an array, but what I get is an object. Because it is vue An error is reported, so you can directly expand based on the information reported to find the location of the problem. (https://blog.csdn.net/qq_41485414/article/details/90263613, this URL is a detailed explanation)

3. The problem of two-dimensional object data being modified after assignment

   This is the data defined by itself. You need to use this object when doing submissions and other operations.
   request:
   object = {
       'name':'zs',
       'age':'18',
       'form1': {
           'gender':'male',
           'brithday':'2020-01-06',
           'nation':'Han nationality'
       },
       'form2':{
           'marriage':'unmarried',
           'tel':'13586598569'
       }
   }
   The following data is the back-end return data obtained
   answer:
   data = {
       'name':'ls',
       'age':'20',
       'data1':{
           'gender':'nv',
           'brithday':'2020-01-20',
           'nation':'Manchu'
       },
       'data2':{
           'marriage':'Married',
           'tel':'1805926598'
       }
   }
   ​
   After getting the data returned by the backend, it is usually to be "echoed" in the case of direct assignment and then the object to be used will appear when the submit operation is performed. After the assignment, form1/2 does not exist. At this time You can do this when you need form1/2 two objects
   1. Method 1: (/Recommended by back-end bosses)
    object.form1 = object.data1
    object.form2 = object.data2
   2. Method 2:
   var a = JSON.parse(JSON.stringify(object/).replace(/data1/g,"form1"));
   This method may not work, at least it did not work in my vue project, but it worked in my code above
   3. Method three (for vue project)
   this.$set( target, key, value )
   target: The data source to be changed (can be an object or an array)
   key: the specific data to be changed
   value: the re-assigned value
   ​

4. The problem of two-way data binding of parent and child components

   Problem Description:
   After the parent component gets the back-end return data, it is passed to the child component through v-bind, and the child component receives the passed value through props.
   When doing component extraction, the submit button is used on several pages, and then I did not extract it to the sub-component, which caused me to be unable to use this.$emit method.
   Solution:
   Write ref="name" on the defined subcomponent
   The parent component uses this.$ref.name.props to receive the name of the value in the value. The value can get the value of the child component v-moudle two-way binding

5. After the parent component passes the value to the child component, the child component cannot get the value passed by the parent component in the created or mounted.

Problem Description:
After the parent component passes the value to the child component, the child component cannot get the value passed by the parent component in created or mounted.
The reason why I have this problem:
//I get the data returned by the backend after the request, and assign it after returning, but I give the assigned data v-bind to the subcomponent, because it is the request, so the data is obtained asynchronously. At this time We don't know when the request will be completed, so I will get a null value in the child component
Solution:
1. Use v-if on the subcomponent to determine whether the value to be passed is there, and if so, create the subcomponent
2. Use watch to monitor data in subcomponents
A. The first value handler: its value is a callback function, which is a function that needs to be executed when listening to the object’s dialogue
B. The second value deep: its value is true or false, whether it is in-depth monitoring (generally, monitoring cannot monitor changes in object property values, except for arrays)
C. The third value immediate: its value is true or false, whether to execute the handle function with the current initial value (when the value is bound for the first time, the monitoring function will not be executed, only when the value changes. If we If you need to execute the function when you initially bind the value, you need to use the immediate attribute.).
watch: {
   // Object received in props
    obj:{
       //Callback 
        handler(newVal, oldVal) {
            if(newVal){
                for(let k in this.data){
                    this.data[key]=newVal[key]
                ｝
            }
        },
    //Its value is true or false, whether it is in-depth monitoring (generally, monitoring cannot monitor changes in object property values, except for arrays)
        deep:true,
   //immediate: its value is true or false, whether to execute the handle function with the current initial value (when the value is bound for the first time, the monitoring function will not be executed, only when the value changes
        immediate:true   
    }
​

Continuously updating...

Due to the new project of the public security system, the detailed code cannot be displayed, so I try to describe the problem and summarize.