Handle undefined in Boolean prop as if value was not set instead of coersing to false

[thenickname]

What problem does this feature solve?

Due to the compositional nature of vuejs apps it is often necessary to define props that are simply passed down to some child component (without otherwise using them in the parent). By coercing an unset (= undefined) prop value to false, vue prevents the usage of default values in props with type Boolean. Also, in the context of Boolean typed props it does make a difference wether something is explicitly true or false or undefined.

Usage scenario

• Suppose there are two components ParentComp and ChildComp.
• ChildComp has props propA, propB and propC.
• ParentComp uses an instance of ChildComp but it does not (and should not) know, what values to provide for the props of ChildProp
• hence, ParentComp moves the responsibility of providing the ChildComp props out to the outer scope by itself defining props propA, propB and propC and simply passing them down to the child
• now it's up to the user of ParentComp to provide the correct input for the props.
• ChildComp has default values for it's own props
• ParentComp does not define defaults. Remember, it does not know how to use ChildComp and simply moves this responsibility away from itself by letting the user decide

The setup described above leads to the following, useful behavior:
The user of ParentComp may decide to provide values for propA, propB and propC or may also ommit one or more of these props. If the values are ommited, the defaults of the child kick in and provide useful values.

The Problem

The bahavior described above works for all prop types except for Boolean. Ommiting parent prop values usually leads to the child prop using its own default values. In the case of Boolean props however, the parent prop without default value (= undefined) is always transformed to false, effectively breaking this pattern of use child default if parent prop value ommited. If the child defined a boolean prop with true as default, this value is now always overwritten by the parent prop to false. Now the parent prop has to explicitly define the prop default value to be true. In other words: It needs to know an implementation detail of it's child.

What does the proposed API look like?

ChildComp props:

props : {
    propA : {
        type : String,
        default : 'some default',
    },

    propB : {
        type : Array,
        default : () => [],
    },

    propC : {
        type : Boolean,
        default : true,
    }
}

ParentComp props:

props : {
    propA : {
        type : String,
    },

    propB : {
        type : Array,
    },

    propC : {
        type : Boolean,
    }
}

ParentComp template:

<div>
    <child-comp
        :prop-a="propA"
        :prop-b="propB"
        :prop-c="propC"/>
</div>

Usage of ParentComp:

<parent-comp/>    // props are not set

Resulting values of ChildComp (as currently implemented in vue):

propA: 'some default'
propB: []
propC: false

Proposed change:

propA: 'some default'
propB: []
propC: true

[posva]

Duplicate of #4792

If you need other things than just Booleans, you should set a different type to the prop because that's the reality, you can have more than just booleans 🙂