Vue props does not write value when passing

If the parent component passes in the prop property, the following points need to be met:

  • The property value is an empty string or the property value is equal to the property name;
  • propthetypeProperty does not existStringType;
  • ifpropthetypeExists in the propertyStringType, thenBooleanType in thetypeThe index in the property must be less thanStringType, that isBooleanThe type has a higher priority;

Then set the value of this property to true

proven

Let C1 be component A and C2 be component B.props: {
    disabled: {
      type: [String.Boolean].default: false<C1 disabled/> propstrue;props: {
    disabled: {
      type: [Boolean.String].default: false,}},Copy the code

Source appreciation

// src/core/util/props.js
export function validateProp (key,propOptions,propsData,vm) {
  const prop = propOptions[key]
  constabsent = ! hasOwn(propsData, key)let value = propsData[key]
  // boolean casting
  const booleanIndex = getTypeIndex(Boolean, prop.type)
  if (booleanIndex > -1) {
    if(absent && ! hasOwn(prop,'default')) {
      value = false
    } else if (value === ' ' || value === hyphenate(key)) {
      // only cast empty string / same name to boolean if
      // boolean has higher priority
      const stringIndex = getTypeIndex(String, prop.type)
      if (stringIndex < 0 || booleanIndex < stringIndex) {
        value = true}}}// check default value
  if (value === undefined) {
    value = getPropDefaultValue(vm, prop, key)
    // since the default value is a fresh copy,
    // make sure to observe it.
    const prevShouldObserve = shouldObserve
    toggleObserving(true)
    observe(value)
    toggleObserving(prevShouldObserve)
  }
  if(process.env.NODE_ENV ! = ='production') {
    assertProp(prop, key, value, vm, absent)
  }
  return value
}
Copy the code

Make a record here, only in-depth principle, when the development is more handy. Note that $attrs does not pass a value, such as < Component disabled/> when $attrs. Disabled gets a value of “”, which complies with the HTML attribute feature.

The explanation is as follows:

Boolean properties

Some content properties (such as required, Readonly, and Disabled) are Boolean properties. A Boolean property has a value of true if it exists and false if it does not.

HTML5 defines the values allowed for Boolean attributes: if the attribute exists, its value must be either an empty string (that is, the value of the attribute is not assigned), or a case-insensitive ASCII string that is exactly the same as the attribute name, with no Spaces before or after. The following examples are valid ways to value a Boolean attribute.

<div itemscope> This is valid HTML but invalid XML. </div> <div itemscope=itemscope> This is also valid HTML but invalid  XML. </div> <div itemscope=""> This is valid HTML and also valid XML. </div> <div itemscope="itemscope"> This is also valid HTML and XML, but perhaps a bit verbose. </div>Copy the code

To be clear, Boolean attributes cannot be “true” or “false”. If you want to represent false, the Boolean attribute needs to be ignored entirely. This limitation clears up some common misconceptions: for example, if checked=”false” is set on an element, the checked property of the element will be interpreted as true because the attribute is present.

reference

Developer.mozilla.org/zh-CN/docs/…

www.freesion.com/article/363…