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

This article is about how vue custom components implement v-model two-way binding of data. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

A custom public component is encountered in the project for the project to call. Normally, you can use the props definition parameter to receive the parameters passed by the parent component, and then pass the data back to the parent component through the $emits () method of the child component.

Similar to the following:

Parent component

/ / checkChange (value) {this.goodsSelected=value// subcomponent data assignment to parent component}

Sub-component

/ * switch selected backhaul * / toggleCheck (value) {this.$emit ('changeCheck', value) / / backpass method to return the changed data of the child component to the parent component for processing}

But this kind of writing needs to call the page additional writing method of the common component, and it seems too low, can we declare the direct v-model two-way binding like the common component of the framework? Next, we provide ways to deal with the actual situation encountered in the project.

The first way:

Normally, when you bind the v-model attribute to the child component in the parent component, the data bound by v-model will be paid to the props attribute of the child component named value by default in the child component. Value still needs to be declared in the child component props in advance, otherwise it cannot be received.

When the value is modified, it is not immediately passed back to the parent component in both directions. If you want to send back the v-model of the parent component to update synchronously, you need to do the following

This.$emit ('input', value)

When an event returned by two-way binding is not declared, it is returned by default through the input event. Why do you say "when an event returned by two-way binding is not declared"? this is the second way, which will be discussed below.

To put it simply, the first way is to bind the parent component data by v-model, then receive the props property of the child component value automatically, and finally call this.$emit ('input', value) to return to the parent component when the data is changed, so that the parent component can achieve two-way binding without additional implementation of the child component.

The second way:

It was mentioned earlier that "when events that are not declared two-way binding postback" use input postback by default. Now that that's the case, what if I don't use input? This requires understanding a special property of vue: model, which can be used to declare which field the child component uses to receive bidirectionally bound data, and which method to call back to update the data of the parent component v-model, as follows:

Export default {name: 'CommonCkeckBox', model: {prop:' checked', event: 'changeCheck'}, props: {checked: {type: Boolean, default: false,}, / / selected status}}

This way of writing means that the data bound by the parent component will be bound to the props property of the child component named checked, and when the child component calls this.$emit ('changeCheck', value), the data of the parent component will be updated synchronously to achieve the two-way binding.

Next, a custom checkbox code is attached for reference:

/ * Global unified pop-up window * / export default {name: 'CommonCkeckBox', model: {prop:' checked', event: 'changeCheck'}, props: {checked: {type: Boolean, default: false,}, / / selected status disabled: {type: Boolean, default: false,} / / whether to disable width: {type: String, default: '16pxwidth,}, / / button default width height: {type: String, default:' 16pxwidth,}, / / button default height}, created () {}, data () {return {}} Methods: {/ * switch selected backhaul * / toggleCheck () {this.$emit ('changeCheck',! this.checked) this.$emit (' toggleCheck')}}, watch: {checked: {handler (newValue, oldValue) {/ / Open state change event this.$emit ('onChange')}, deep: true}} } .check-box-container {display: inline-block .checkbox-icon {img {transform: translateZ (0); will-change: auto;} .background-color:#f5f5f5; border-radius {background-color:#f5f5f5; border-radius: 50%;}

Parent component:

The specific way to choose according to the project scenario, if the first does not meet the requirements, you can try the second implementation.

Thank you for reading! On "vue custom components how to achieve v-model two-way binding data" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

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.