.vue file classification

By default, the views and Components folders are set in the project, and both folders contain.vue files. Since they are of the same type, why set two folders? Because the use is a little different.

Depending on how you use them,.vue files can be divided into pages, components, and controls.

page

At first I thought the.vue file didn’t need properties (props) because no one could pass them to it. Later I learned about routing and found that I was wrong. Routing can not only load components, but also pass attributes to components.

So. Vue files can have props no matter where they are, so there is no clear distinction from the code point of view.

So it can only be distinguished by how it is used.

A page can be viewed as a component directly loaded by route. As a “container”, it stores multiple components, determines their location, and is responsible for the connection between each component.

component

Sections that are shared by multiple pages, such as navigation, header, and footer, or that are functionally independent. Separating the code from the page makes it more legible, extensible, and maintainable. If I want to change a navigation, I just go to the navigation component, and I don’t have to change the rest of the code by mistake.

Other components will not see the code in the common component, just specify the location. You can focus on your own logic.

controls

Simply said, is the UI library to provide a variety of controls, such as the form in the text box, select list box, date selection control and so on, as well as form control, list control, paging control and so on.

Although in VUE, these are in the form of components, but can be subdivided, clear, so that is not easy to misunderstand.

This series focuses on components such as controls.

Let’s start with a simple text box as an example.

Define the components

<template> <input :value="modelValue" @input="myInput" ><br> {{modelValue}} </template> <script> import { toRef, toRefs, watch } from 'vue' export default { name: 'mytext', props: { modelValue: String, meta: Object }, emits: ['input'], setup (props, Context) {// Submit modification property to parent const myInput = (e) => {console.log(e) context.emit('update:modelValue', e.target.value) } return { myInput } } } </script>Copy the code
  • Template: The template section, which writes HTML code and vUE binding statements.
  • Script: part of the JS script.
  • Style: You can write CSS.
  • Export Default: Returns an object used to create the component.
  • Name: component name. You can omit this property, but if you do, do not duplicate it.
  • Props: Defines the properties of the component.
  • emits: Defines component events.
  • Setup: New way of writing vue3. Although vue3 is also compatible with VUe2, we already use vue3, so try to use a new way.

The parent component uses components

<template>
  <div class="home">Value of parent component: {{value}}<br>Own components:<mytext v-model="value"/><br>Native text box:<input type="text" v-model="value"/>
  </div>
</template>

<script>
import { ref } from 'vue'
import mytext from '@/components/nf-html/input-text2.vue'

export default {
  name: 'eleBase'.components: {
    mytext
  },
  setup () {
    const value = ref('1')

    return {
      value
    }
  }
}
</script>
Copy the code
  • import

Components can be imported as imports.

  • components

If the component is not registered globally, it needs to be registered with the parent component using components.

The parameters of the setup

Setup provides two parameters, one is props, which passes the properties of the component; One is context, which provides methods such as emit.

props

In Setup, you can access component properties through props, but note that in principle you are not allowed to modify property values directly within a component. Therefore, you can generally use watch to monitor attribute changes. But what if I just want to access the properties? We can design several ways to see the effect:

    const myProps1 = props // Get attributes
    const myProps = toRefs(props) // toRefs to get attributes
    const myValue = toRef(props, 'modelValue') // toRef gets the specified attribute
    console.log('Native property :', props)
    console.log('toRefs attributes :', myProps)
    console.log('toRef attributes :', myValue)
    console.log('myProps.modelValue:', myProps.modelValue)

    // If you modify it directly, an error will be reported (ESLint)
    // props. ModelValue = 'props'

    // Try to modify, although only warnings do not report errors, but the modification will not succeed.
    myProps1.modelValue = 'Internal direct modification'

    // Try to modify, although only warnings do not report errors, but the modification will not succeed.
    myValue.value = 'Internal modification properties'

    // Monitor property changes
    watch(() = > props.modelValue, (v1, v2) = > {
      console.log('Original value:', v1)
      console.log('New value:', v2)
    })
Copy the code
  • Property to print

As can be seen from the printed result, the component’s properties are encapsulated in the form of Reactive and then coated with readOnly, so that the effect cannot be directly assigned.

Note: This cannot be modified only for simple types. If the attribute is an object type, it can be modified directly.

  • Try direct assignment.

An error was reported when attempting to assign a value directly, but it cannot be modified and will give a warning, as shown in the following figure:

  • ToRefs and toRef

ToRefs can split an attribute into multiple refs. ToRefs tries to change the value directly if the attribute is of a simple type. But if the property type is an object, you can change the value directly.

ToRef has the same effect.

context

Let’s take a look at the context print:

The more common one is emit, equivalent to vue2’s this.emit.

We can write a function that submits properties to the parent component

   // Submit modified properties to the parent component
    const myInput = (e) = > {
      console.log(e)
      context.emit('update:modelValue', e.target.value)
    }
Copy the code
  • update:modelValue

This is a way to modify the properties of the parent component, followed by the values to be modified.

v-model

Vue3 now supports multiple V-models. The parent component can be written like this:

v-model:foo="foo" v-model:fo="fo" 
Copy the code

If you only need one attribute, you can abbreviate it

v-model="fooo"
Copy the code

The property names inside the component are written as a fixed “modelValue”, or with colons if they are other property names.

summary

This is just the beginning, the basics, and there’s a lot more to come.

Source:

Github.com/naturefwvue…