First answer the questions in the previous article
1. Why don't v-for key s be indexed?
First of all, the: key is used to issue a unique identifier to v-for. It is used for performance optimization. Its value should be non duplicate and unique
If you use the index as the value of the key, when you insert another value into the array or delete a value, the index will change with the change of the value. At this time, the position rendered by v-for may be disturbed. For example, if you delete a current value, the latter one will be deleted
Therefore, when using: key, it is best to use a unique and non repetitive value, such as id, so as to ensure accuracy
2. Why does v-for not trigger array update sometimes?
The vue bottom layer can only detect the array order / position change / quantity change, but the value is re assigned, and the vue cannot detect it. For example, the literal method directly changes the value, which cannot be detected at all
To solve this problem, use either this.$set or Vue.set()
1, Components
1. What is a component
Components are reusable Vue instances, which can encapsulate labels, styles and js code, and encapsulate reusable parts of the page into components to facilitate project development and maintenance
2. How to use
Step 1: Register
Create the components to be encapsulated (i.e. vue files) in the components folder in the project folder
Create the test.vue file here,
Step 2: Import
Step 3: Register
Two registration methods
1. Global registration
2. Partial registration
Step 4: use
Used as a label according to the component name at the time of registration
3.scoped action
Adding scoped to the style tag in the component can make the style effective only in the current component
Principle: after adding the scoped attribute, a randomly generated attribute with random hash value at the beginning of data-v will be added on the label of the corresponding component, so as to ensure that the style is only effective for the current component
2, Correspondence
1. Transfer value from parent to child
Subcomponent props receive value
For example, the variable str is defined in the parent component, and the value is passed to the child component on the component label
<template>
<div>
<test :abc="str"> </test>
</div>
</template>
<script>
import test from "./components/test.vue";
// import vue from "vue";
// vue.component("test", test);
export default {
components: {
test,
},
data() {
return {
str: "I'm the value passed",
};
},
};
</script>
<style>
</style>The child component uses props to receive variables, and the variable name needs to be the same as the attribute name passed by the parent component
<template>
<div>
{{ abc }}
</div>
</template>
<script>
export default {
props: ["abc"],
};
</script>
<style>
</style>2. Child to parent communication with v-for loop
For example:
Parent component:
<template>
<div>
<test v-for="(item, index) in arr" :key="index" :val='item'> </test>
</div>
</template>
<script>
import test from "./components/test.vue";
// import vue from "vue";
// vue.component("test", test);
export default {
components: {
test,
},
data() {
return {
arr: [1, 23, 4, 324, 5421, 23421, 24, 234, 24, 42],
};
},
};
</script>
<style>
</style>Subcomponents:
<template>
<div>
{{ val }}
</div>
</template>
<script>
export default {
props: ["val"],
};
</script>
<style>
</style>Note: you can also directly pass the array into the sub component, and then traverse it in the sub component
3. Unidirectional data flow
The principle of one-way data flow should be followed in vue
- When the data of the parent component changes, the child component will follow the change
- The child component cannot directly modify the props passed by the parent component. Props is read-only
Note: if the parent component passes an object or an array to the child component, the reference type data will not report an error, because the parent component passes an address and updates each other
Summary:
props variable itself is read-only and cannot be re assigned
The data flow from parent component - > child component is called one-way data flow
If a child component is modified without notifying its parent, the data will be inconsistent
4. Component communication - child to parent
Pass the value of the child component to the parent for use, and then affect the child component through one-way data flow
Use custom event name
For example:
Parent component:
<template>
<div>
<!--1.Start here,The parent component passes the values in the array to the child component :val='item'-->
<!-- 7.Custom events take effect here,trigger delFn method -->
<!--10.Update new array,Impact sub components -->
<test
v-for="(item, index) in arr"
:key="index"
:val="item"
@delEvent="delFn"
>
</test>
</div>
</template>
<script>
import test from "./components/test.vue";
// import vue from "vue";
// vue.component("test", test);
export default {
components: {
test,
},
data() {
return {
arr: [1, 23, 4, 324, 5421, 23421, 24, 234, 24, 42],
};
},
methods: {
//8. Define the delFn method here
delFn(min) {
//9. Operate the array here
this.arr.splice(
this.arr.findIndex((item) => item === min),
1
);
},
},
};
</script>
<style>
</style>Subcomponents:
<template>
<div>
<!-- 3.Render val Value in DOM in -->
<span>{{ val }}</span>
<!-- 4.Click the button to trigger btn()method,Parallel transmission parameter val -->
<button @click="btn(val)">delete</button>
</div>
</template>
<script>
export default {
//2. The sub component received the value val
props: ["val"],
methods: {
//5. Define the btn() method here
btn(who) {
//6. Use this.$emit() method to pass the custom event name and val value
this.$emit("delEvent", who);
},
},
};
</script>
<style>
</style>In this way, you can complete a simple deletion function. Generally, you need to pass the id value. Here, simply use the original value instead
Think (the answers can be written in the comment area)
Why is the data of vue component a function?
Friends with answers are welcome to the comment area. The answers will be announced in the next issue. To be continued