But silence is the highest contempt.
. — — — — — – lu xun

A series of introduction

This series may be divided into several parts:

Summary of basic and advanced usage
Some of the more representative actual combat
Source code analysis (must be in the most vulgar, no, the most popular language, I can guarantee that)

In short, must live up to the advanced advanced these words…

Component classification

Vue components mainly include:

The pages generated by vue-Router can be called routing components
Independent base components: Base components such as Date and input that can be reused globally
Business components, in addition to the above two are business components

Component essence

props

Tppe type
The default default
- If it’s an object, an array, you have to return it as a method

msg:{
    type: Array,
    default: ()=>([])
}
Copy the code

Validator validator, which takes a value
Whether inheritAttrs inherits HTML features
Child components cannot modify prop passed by parent components

event

Methods a

<parent-com @on-click="handleClick"></parent-com> child <button> Click </button> to trigger this in the child.$emit('on-click', event);
Copy the code

Method 2

Native means < parent-com@click. native="handleClick"></parent-com> child component <button> Click </button>Copy the code

slot

The

node is the location of a specified slot. V-slot :[name] specifies the location of a slot

A named slot.

The element uses a special attribute name to configure how content is distributed. Multiple slots can have different names. Named slot matches the element’s parent component in the content fragment that has the corresponding slot feature

    <slotshow>
        <p>{{msg}}</p>
        <h6 slot="xxx"Word-wrap: break-word! Important; "> </h6> vue2.6 and above is like this <h6 v-slot: XXX > </h6> </slotshow>Copy the code

Child components

    <div class="slotcontent">
        <slot></slot>
        <slot name="xxx"></slot>
    </div>
Copy the code

Scope slot

A scoped slot is a special type of slot used to replace rendered elements with a reusable template that can pass data to. In the child component, you simply pass data to the slot, just as you pass props to the component, and the contents of the slot can use this passed data. In the parent, the

A list of components

Var childNode = {template: '<ul> // pass :text="item.text"Pass value <slot name="item" v-for="item in items" :text="item.text"> Default </slot> </ul> ',data() {return{
          items:[
              {id:1,text:'Paragraph 1'},
              {id:2,text:'Paragraph 2'},
              {id:3,text:'Paragraph 3'},]}}}; var parentNode = { template: ` <div class="parent"> <p> Parent </p> <child> // receive via props <template slot="item" scope="props">
          <li>{{ props.text }}</li>
          </template>
     </child>
 </div>
 `,
 components: {
    'child': childNode
 },
};
Copy the code

Component communication (Part 2 covers 8 uses in detail)

ref: Registers reference information for an element or component
$parent / $children: Accesses the parent/child instance.
propsFather passes to son
$emit and $onSon, — — — — — > parent
vuex

Bits of knowledge

Methods to change an item in an array:
1. Change the object’s reference directly
2. You can use push,shift, etc
3. Vue’s mutation method can be used
```
Vue.set(vm.userinfo,2,{a:1})  == vm.$set(vm.userinfo,2,{a:1})
Copy the code
```

Is attribute

<table>
	<tr id="row"</table> </table>Copy the code

Data in a child component must be a function to return an object, just to be sureThe data attributes of each instance are independent and do not affect each other

That’s the first section. I don’t like to write nonsense

If you think it’ll help, click

praise

Continue to output these short and effective articles to help you master the most content in the shortest time. After all, who doesn’t like to do it once and for all? ❥ thank you ~ (^ _ -)

Subsequent directory

No nonsense vUE advanced advanced (a) component essence overview

No nonsense vUE advanced advanced (two) 8 kinds of component communication details

No nonsense vUE advanced advanced (iii) components advanced usage and best practices