1. One-way data flow

Prop creates a one-way data flow between the parent and the child, where prop updates from the parent flow down to the child, but not the other way around. This is designed to prevent the child from accidentally changing the state of the parent, so if a prop is changed in the child, Vue will alert the browser console. Warning:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "deptInfo" found in...
Copy the code

How to use prop values in child components

1. Define a local data property and use this prop as its initial value

Props: ['deptInfo'].data: function() {
  return{departmentInfo:this.deptInfo
}
Copy the code

2. If you need to convert the original value passed in, you can define a calculated property

Props: ['data'].computed: {
  tableData : function() {
    return JSON.parse(JSON.stringify(data)); }}Copy the code

Pay attention to

Objects and arrays are passed in by reference in JavaScript, so for a prop of an array or object type, changing the object or array itself in a child component will affect the state of the parent component. In this case, a deep copy of the data is required, for example:

Props: ['data'].computed: {
  tableData : function() {
    return JSON.parse(JSON.stringify(data)); }}Copy the code