Prop

1 . prop case

Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- In parent component kebab-case of -->
<blog-post post-title="hello!"></blog-post>
1234567

2 . Single data flow
All props form a one-way downstream binding between their parent and child props: the updates of the parent props will flow down to the child components, but not vice versa.
Every time the parent component is updated, all props in the child component will be refreshed to the latest value. This means that you should not change prop within a sub component.

<!-- Test one-way data flow -->
Parent component 
<h1>{{msg}}</h1>
<test-single-data-flow :msg="msg"></test-single-data-flow>


Subcomponent pass prop Accept parent component msg
Vue.component('test-single-data-flow', {
props: ['msg'],
data() {
  return {

  }
},
// Subcomponents cannot modify values in prop
template: `<span><input type="text" v-model="msg"/></span>`
})
var app = new Vue({
el: "#app",
data: {
  msg: 'Single_Data_Flow'
}
})
1234567891011121314151617181920212223

Single data flow cannot be modified
Vue will issue a warning when modifying the data passed by prop in the component, so there are two common ways to modify the value passed by prop

• Define the attribute in the local data and take prop as the initial value

data() {
return {
  msg_data: this.msg
}
}
12345

• Use computed to process the value of prop,

computed:{
msg_computed(){
  return this.msg + " Computed"
}
}
12345

prop verification

<test-prop-validate :prop-a="1" :prop-b="2" :prop-c="'3'" :prop-f="'success'"></test-prop-validate>
Vue.component('test-prop-validate', {
props: {
  // Basic type check (` null 'matches any type)
  propA: Number,
  // Multiple possible types
  propB: [String, Number],
  // Required string
  propC: {
      type: String,
      required: true
  },
  // Number with default value
  propD: {
      type: Number,
      default: 100
  },
  // Objects with default values
  propE: {
      type: Object,
      // The default value of an object or array must be obtained from a factory function
      default: function () {
          return { message: 'hello' }
      }
  },
  // Custom validation function
  propF: {
      validator: function (value) {
          // This value must match one of the following strings
          return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
  }
},
data() {
  return {

  }
},
template: `
  <div>
      {{propD}}{{propE}}
  </div>
  `
})
1234567891011121314151617181920212223242526272829303132333435363738394041424344

type can be one of the following native constructors:

String Number Boolean Array Object Date Function Symbol

Non prop characteristics

Non prop features, the component can accept any features, and these features will be added to the root element of the component

<style>
.colorRed {
color: red;
}

.defineSize {
font-size: 20px;
}
</style>
<!-- wrong prop attribute -->
<test-not-prop class="colorRed" my-self-define></test-not-prop>
Vue.component('test-not-prop', {
data() {
  return {

  }
},
template: `<div style="font-weight:bold;" class="defineSize">Test Not Prop</div>`
})
<!-- Render as -->
<div class="defineSize colorRed" my-self-define="" style="font-weight: bold;">Test Not Prop</div>
123456789101112131415161718192021

Non Prop attribute rendering
For most features, the value provided to the component from the outside will replace the value set inside the component. So if you pass in type = "text", you will replace type = "date" and destroy it! Fortunately, the class and style features will be a little smarter, that is, the values on both sides will be combined to get the final value: defineSize colorRed.

summary

• prop data single item transmission, parent affects child, child does not affect parent
• The value passed by prop cannot be directly modified in the component, and Vue will give a warning
• During prop verification, it will be verified before the instance is created, so the attributes of the instance (such as data, computed, etc.) are not available in the default or validator function
• Non prop features, the component can accept any features, and these features will be added to the root element of the component.