This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Sunset glow on campus

preface

Components are the only thing you need to learn vUE, otherwise it might be a waste of time.

I oneself early complete the task that the teacher assigns, don’t tell you, hand in, be scolded directly, the reason is I a component didn’t take 😂 (learn while, while knock, didn’t think so much, just want to realize).

A small page, 1163 lines (face covering).

Then I decided to work on the VUE component, which I actually thought was pretty fun. Let’s look at the props that the component must have

You have to know a little bit about component basics before you get to that.

introduce

The vue.js documentation in the props section is really just going to jump right in and treat me like a prop

The scope of a component instance is isolated. This means that you cannot (and should not) refer directly to the parent component’s data within the child component’s template. Data from the parent component can only be delivered to the child component through prop.

That is, the props is the only interface through which the child component accesses the parent component’s data. If we want to dynamically pass data to a subcomponent, the subcomponent must have props.

If the child component wants to render the elements of the parent component, it must declare a variable in the prop that can reference the data of the parent element and then render.

Basic usage

We wrote a widget demo and referenced it in our App

<template> <div> <p> Child component Demo </p> < H1 >{{message}}</h1> </div> </template> <script> export default {props: ['message'] } </script>Copy the code

In the App

<template>
    <div class="todo-container">
      <Demo ></Demo>
  </div>
</template>
<script>
import Demo from './components/Demo'
export default {
  components: {
    Demo
  }
}
</script>
Copy the code

Initialization effect

The line

{{message}}

is not shown.

The child component is already received, but how do we pass the value in the App component?

<! <Demo :message="message"></Demo> </Demo>Copy the code

data () {
    return {
        message: 'hello'}}Copy the code

Next, let’s see if the child components are rendered

The rendering is successful.

In addition, this is the easiest way for a child component to receive props, and in theory you should specify the type when receiving because JavaScript is a weak language.

props: {
  title: String.likes: Number.isPublished: Boolean.commentIds: Array.author: Object.callback: Function.contactsPromise: Promise // or any other constructor
}
Copy the code

This is basically how the parent passes data to the child.

Unidirectional of Props (emphasis)

Note: When the parent component’s property value changes, the child component changes immediately, but not vice versa.

Also, do not try to change the value received by Prop inside the child component. Doing so will work when the value is an object, but this is against the rules and the console VUE will warn you

But there will inevitably be times when we need to change the value of a child component, so what can we do?

1. The first kind:

The parent element passes an initial value through the prop, and we want it to be used as a local prop data in the child component after that. In this case we usually define a variable in the data section of the child component and assign the value to it.

props: ['message'].data: function () {
  return {
    msg: this.message
  }
}
Copy the code

2, the second: calculate attributes

Official examples:

props: ['size'].computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}
Copy the code

Note: Objects and arrays are passed in by reference in JavaScript, so for a prop of an array or object type, changing the object or array itself in a child component will affect the state of the parent component. This is not recommended

The following is a violation of the rules:

It’s not the V-Model that’s wrong, it’s the prop we didn’t use properly.

summary

Prop allows parent components to pass data to child components, allowing them to be reused multiple times.

For the rest of the article, let’s think about how to get the child component to return data to the parent, how the parent, grandchild, and sibling components communicate, and how to bind events to the child component.

Continuous update, we progress together.

After the language

Everyone come on!! If there are deficiencies in the article, please point out in time, in this solemn thanks.

The paper come zhongjue shallow, and must know this to practice.

Hello everyone, I am ning Zaichun: homepage

A young man who likes literature and art but takes the path of programming.

Hope: by the time we meet on another day, we will have achieved something.