This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

In this article we will look at the use of instance property $data, $props, and $EL, and what we need to be aware of.

How to use

$data

This function returns the data object of the component instance. Once the instance is created, the raw data object can be accessed through vm.$data. The component instance also proxies all properties on the data object, so accessing vm.a is equivalent to accessing vM. $data.a. Here’s an example:

const { createApp, ref } = Vue
const app = createApp({
    data() {
        return {
            name: 'also laugh'}},setup() {
        const englishName = ref('slifree')
        return {
            englishName
        }
    },
})
const vm = app.mount("#app")
Copy the code

$data.name ===vm.$data.name ===vm.$data.name ===vm. $data.englishName===undefined,vm.englishName===’slifree’, because this data is created in the setup function and not in the data object.

It is worth noting that once listened, you cannot add responsive properties to the root data object. Therefore, it is recommended that all root-level responsive properties be declared before instance creation.

$props

Before we say $props, let’s look at props: an array or object that is used to receive data from the parent component. It can be a simple array-based syntax or an object-based syntax that supports higher-order configurations such as type detection, custom validation, and setting defaults. There are four parameters for props, which are as follows:

Simple to use

// It is an array
props: ['name']

// Object form, easy to use
props: {name: String.// Type check
}
Copy the code

High order use

props: {
     name: {
      type: String.// Type check
      default: 'also laugh'./ / the default value
      required: true.//'Boolean' defines whether prop is mandatory
      validator: value= > { //'Function' the custom validation Function will substitute the value of the prop as its only argument
        return value.length >= 1}}Copy the code

From the above, we have some idea of props. $props is the props object received by the current component. The component instance proxies access to its props object property as follows:

app.component('my-component', {props: ['name'].render(){
        console.log(this.$props)
        return h('h1',{},[
            h('div', {},`Hi,The ${this.name}! `),
            h('div', {},`Hello,The ${this.$props.name}! `)]}})Copy the code

Render the result as follows:

Hi, smile! Hello, also smile!Copy the code

Vm. name is equivalent to calling vm.$props.

$el

The root DOM element that the component instance is using. For components that use fragments, $el is the placeholder DOM node that Vue uses to track the component’s position in the DOM, as follows:

Custom Components

app.component('my-component', {
    props: ['name'].setup() {
        const { ctx } = getCurrentInstance()
        onMounted(() = > {
            console.log(ctx.$el)
        })
    },
    render() {
        return h('h1', {}, [
            h('div', {}, `Hi,The ${this.name}! `),
            h('div', {}, `Hello,The ${this.$props.name}! `)]}})Copy the code

The result of CTX.$el in the custom component is:

<h1><div>Hi, smile!</div><div>Hello, also smile!</div></h1>
Copy the code

Here we use getCurrentInstance to track the component’s position in the DOM, which is a quick way to get the component’s DOM, but we don’t recommend this. Instead, we recommend template references (vm.$refs) to access DOM elements directly.

conclusion

  1. Not all reactive data can be retrieved from vm.$data, only data objects.

  2. We need to give props as an argument to the requirements, and in setup we pass it as a parameter instead of using vm.$props.

For more articles, the portal has opened: Look back at the Vue3 catalogue!