Shulou(Shulou.com)06/02 Report--

Vue how to use v-model custom components, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

If we want to implement bidirectional data binding when using vue, we will use v-model as follows:

What if you customize a component and want to implement two-way data binding? First of all, we need to understand the principle of v-model. The above code is actually an abbreviation of the following code:

Let's look at a requirement, the code is as follows:

{{msg}}

By completing the code of the my-input component, the two-way binding of data is realized.

In the first implementation, if my-input is replaced by input, it will be done with a v-model, but now how can we implement it without using v-modle? Look at the code:

{{msg}}

/ / 1. Custom component, / / a, receive the parameters passed by value with props, / / b, receive value// c with internal data, create a new oninput method, change currentvalue,// so that the child component function triggers the parent component function, pass the value / / d, establish the template, bind in the text box and bind currentvalue through value / bind oninput event Vue.component ("my-inputt", {template: `my-input: `, props: ["value"], data () {return {currentvalue: this.value}, methods: {oninput (e) {this.currentvalue = e.target.value) via input This.$emit ('input', e.target.value)})

New Vue ({el: "# app", data: {msg: "initial value"}, methods: {changemsg (v) {this.msg = v})

The key point is how to pass the value from the component to the parent component. The direction of the data is that the parent component passes the msg from the component, copies a copy from the component, modifies the copy and triggers the function bound by the parent component, thus achieving the principle of two-way data binding.

Let's use v-model in the component to implement the above function:

{{msg}}

Vue.component ("my-input", {template: ``, props: ["value"], data () {return {currentValue:this.value}}, methods: {Oninput ($event) {this.currentValue = $event.target.value; this.$emit ('input',$event.target.value)}}, created () {console.log (this.value)}})

New Vue ({el: "# app", data: {msg: "initial value"}})

In comparison, we find that using v-model is relatively simple, and there is no need to add additional methods to the parent component. The first solution defines an additional changemsg function for the parent component, while the second solution does not. The second solution only needs to listen to events from within the component and trigger input events in the appropriate place. Vue will automatically update things that change the data.

The rationale for a component with v-model is as follows:

1. First, the parent component with v-model is passed to the child component through the bound value value (that is, the bound value of v-model)

2. Then the subcomponent receives a value through prop

3. The last child component uses $emit to trigger the input event, and passes the new value value to the parent component

4. Vue will update the data automatically.

After reading the above, have you mastered how to use v-model custom components in Vue? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.