I remember reading a sentence before that no UI library on the market can meet all the needs of a product.

In fact, it is true that product requirements are always strange. As for our current product, we use elemen-UI library, but we cannot cascade multiple selections, the display form of multiple selections is not correct, and the shuttle box cannot move up and down, etc., forcing us to write component implementation by ourselves.

After implementing both components by hand, write an essay documenting some of the pitfalls and new things you learned

1. Child components are not allowed to modify parent component data

The parent component that writes Angular passes data, and the child component can modify the data passed by the parent. However, in Vue, the neutron component does not allow you to modify the value that the parent component passes in, for example in Vue

<! --> < child-component :value="data"></ child-component ><! - the parent component of js content - > export default ({data () {return {data: [1, 2, 3, 4]}}}) <! Export default({props: ["value"], created: {this.value = [5,6,7,8]; }})Copy the code

This causes a very common error,

So what is the solution? That depends on your needs. For example, if I pass in a render list and all I need to do is modify the render data, I can emit it and reassign the value in the parent component to trigger the child component to render again through bidirectional binding.

<! <children-component :value="data" @changeprop ="changeData"></children-component> <! Export default({data(){return {data: [1,2,3,4]}}, methods: {changeData(value){this.data = value; }}}) <! Export default({props: ["value"], created: {this.$emit("changeProp",[5,6,7,8])}})Copy the code

The example is simple to write. The principle is to emit data to the parent component, receive the new value in the parent component, assign the new value to the data, and then pass it back to the child component.

One way to be reminded is to use.sync, which is also possible. I had always thought it was useless to be abandoned, but I found it was actually in. Taking a look at the.sync document, it turns out that this is actually a syntactic sugar representation. As shown in the documentation

<! <comp :foo.sync="bar"></comp> <! - left left left left left true form left left left left left left down down down down down down down - > < comp: foo = "bar" @ update: foo = "val = = > bar val" > < / comp > <! $emit('update:foo', newValue) $emit('update:foo', newValue)Copy the code

In my opinion, the Vue framework is still not in favor of modifying data directly, but it does help you define an update event that you can explicitly call in child components without having to define the event yourself.

2.Vue provides a default parent-child passing event v-Model for each component.

While it’s cumbersome to define an event each time you pass data between parent and child components, VUE provides a default V-model syntax sugar for each component.

<! --> < child-component v-mode="data" ></ child-component ><! Export default({data(){return {data: [1,2,3,4]}}, watch: Data (n,o){console.log(n,o); //[5,6,7,8],[1,2,3,4]}}) <! Export default({<! // props: ["value"] <! -- and I went on to use this.value directly in the code (a completely undefined value). --> created : { console.log(this.value); This $emit (" input ",,6,7,8 [5]); // When I want to change the value passed in}})Copy the code

Since I have always used nG-model to pass form components, I had the same impression about V-mode at first. However, after looking at the source code of Element-UI, I found that I thought it was simple. Then I searched online for the explanation of this syntax sugar.

< child-component :value="data" @input="data = arguments[0]"></ child-component >Copy the code

Vue just helps us to merge the two declarations in the parent component, and also helps us to omit the definition in the child component. Grammar candy is all about saving effort.

3. Globally reference the written component once

If we write some components, we will definitely introduce and use them later. But when you write so many components, it’s a hassle to reference what you want everywhere. It is best to introduce them all at once in one place and then use them directly where they are used

(Of course, importing all will inevitably introduce and package things you don’t need, but this is the bane of the common component library, and we will definitely use all of them if we write our own).

Initial introduction of all components / / at the beginning of the file file import from b ". / components/common/b.v ue "import from c". / components/common/c. ue "const components  = [b,c]; const install = function (Vue, opts = {}) { components.map(component => { Vue.component(component.name, component); }); }; export default installCopy the code

Then import it directly into the main.js file of the startup

import ui from "install.js"
Vue.use(ui);
Copy the code

Then you can call any of the components directly, rather than repeating the call yourself.

<b v-model="data1"></b>
<c v-model="data2"></c>
Copy the code

Good, arrive temporarily here, it is oneself step pit and experience, hope to help somewhat to everybody, continue to still have the word to complement again. Dry goods are not much, mainly rotten pen.