This is the 21st day of my participation in the August Text Challenge.More challenges in August

The front of the package button component, dialog component, input component, switch component, radio component, there is a need for children’s shoes please click ~~

Build Vue2 UI Component Library from 0 (1)

Build Vue2 UI Component Library from 0 (2)

Build Vue2 UI Component Library from 0 (3)

Build Vue2 UI Component Library from 0 (4)

Build Vue2 UI Component Library from 0 (5)

How to encapsulate radioGroup components

1. Encapsulate radioGroup components

1. Parameter support

1.1 v – model

• Due to thev-modelBy default, names are usedvalueProp and namedinputSo it should be usedpropsreceivevalueProperties.
• Get what the user has written with a slot.

<div class="zh-radio-group">
    <slot></slot>
</div>
Copy the code

props: {
    value: null
}
Copy the code

1.2. Obtain the value of the radioGroup component

Since v-model binding changed data is added to the radioGroup component, the Radio component does not need to use V-model binding data, so the value state in the radio component written before cannot obtain a value. You need to set the Radio component to get the value passed by the user to the radioGroup component.

How do I get a value in a radioGroup component?

Because a radioGroup component is not necessarily a direct parent of a Radio component, you cannot use $parent to get data from a radioGroup component. Provide/Inject can be used. The radioGroup component uses provide to distribute its component instance to the descendant component, and the Radio component receives the radioGroup component instance through Inject to obtain its value attribute.

The radioGroup component distributes its own component instance:

provide() {
    return {
      RadioGroup: this}},Copy the code

A radio component receives a radioGroup component instance:

inject: {
    RadioGroup: {
      default: ' '}},Copy the code

1.3. Bind the data in the radioGroup component to the radio component

As the previous Radio component uses model state to realize bidirectional binding, get returns the value passed in by the user, and set triggers the input event of the user to modify the value. However, when the Radio component is wrapped by the radioGroup component, There is no user passing in a value without v-model, so the value in the radioGroup component should be used and modified.

Therefore, a calculation property isGroup is set to determine whether the radio is wrapped by the RadioGroup component. If so, the value in the radioGroup component is returned when the Model state is get, and the input event in the radioGroup component is triggered to modify the value when the model state is set.

computed: {
    // Determine whether the radio is wrapped by the RadioGroup component
    isGroup() {
      return!!!!!this.RadioGroup;
    },
    model: {
      get() {
        return this.isGroup ? this.RadioGroup.value : this.value;
      },
      set(value) {
        // When the model changes, the value of the parent component should also change, so the parent component's input event needs to be triggered here
        // this.$emit("input", value);
        this.isGroup ? this.RadioGroup.$emit("input", value) : this.$emit("input", value); }},},Copy the code