Props is a way for parent-child components to communicate. We also call it forward value transfer, that is, the parent component transfers data to the child components. And all props make a single line downlink binding in its parent and child components. Can we modify the data passed by the parent component in the child components???
This is illustrated by the following examples:
First: the data type passed from the parent component to the child component is object
****Parent component
<template> <div> <h3>This is the parent component</h3> <div> <p>The object values to be passed to the child components are:{{ fuObj }}</p> <Zi :obj="fuObj"/> </div> </div> </template> <script> import Zi from './zi.vue' export default { components: { Zi, }, data() { return { fuObj: { name: 'Huanhuan', age: '18', }, } }, }
****Subcomponents
<template> <div> <h4>Here are the subcomponents</h4> <div> <p>The objects passed to me by the parent component are displayed here:{}</p> <button @click="fun">Click Modify the object passed to me by the parent component name Change the value of to]</button> </div> </div> </template> <script> export default { props: { obj: { type: Object, default: () => {}, //Note: when the type of a props is an object, its default value should be written in the form of a function }, }, methods: { fun() { this.obj.name = 'lovely' }, }, } </script>
Summary: the object whose value is passed from the parent component to the child component through prop. After the child component modifies the object, this change will flow to the parent component, that is, the value of the object in the parent component will also be changed. Similarly: arrays are also possible
Second: the data type passed from the parent component to the child component is string
****Parent component
<template> <div> <h3>This is the parent component</h3> <p>The string value to be passed to the subcomponent is:{}</p> <Zi :str="str"/> </div> </div> </template> <script> import Zi from './zi.vue' export default { components: { Zi, }, data() { return { str: 'I'm a string', } }, </script>
****Subcomponents
<template> <div> <h4>Here are the subcomponents</h4> <div> <p>The string passed to me by the parent component is displayed here:{}</p> <button @click="fun2">Click to modify the string passed to me by the parent component</button> </div> </div> </template> <script> export default { props: { str: { type: String, default: 'Huanhuan', }, }, methods: { fun2() { this.str = 'Huanhuan + Yingying' this.isstr = true }, }, } </script>
Summary: the string passed from the props parent component to the child component. After the child component modifies the string, the value in the child component will change, and the change will not flow to the parent component, that is, the original string in the parent component will not change, and vue gives a warning on the console that "the value passed from props cannot be modified inside the child component"..
Third: the parent component passes the value to the input of the child component through v-model
****Parent component
<template> <div> <h3>This is the parent component</h3> <div> <p>The string value to pass to the subcomponent is( v-model): {}</p> <Zi :obj="fuObj" :str="str" v-model="vmodel" /> <!-- Note: v-model The value of can only be a variable --> </div> </div> </template> <script> import Zi from './zi.vue' export default { components: { Zi, }, data() { return { vmodel: 'Passed to subcomponents vmodel', } }, } </script>
****Subcomponents
<template> <div> <h4>Here are the subcomponents</h4> <div> <input type="text" v-model="value" /> <button @click="fun3">Click me to modify the parent component v-module Value passed</button> </div> </div> </template> <script> export default { props: { value: { type: String, default: 'input Default value', }, }, methods: { fun3() { this.value = 'I'm going to modify the parent component v-model The value passed.' }, }, } </script>
Summary: the input value passed by the parent component to the child component through the v-model instruction can be modified in the child component, but the modification will not flow to the parent component, that is, the original value in the parent component will not change, and vue gives a warning on the console that "the value passed by props cannot be modified inside the child component"
Fourth: the data type passed from the parent component to the child component is Boolean
****Parent component
<template> <div> <h3>This is the parent component</h3> <div> <p>The Boolean values to pass to the child components are:{}</p> <Zi :bool="bool" /> </div> </div> </template> <script> import Zi from './zi.vue' export default { components: { Zi, }, data() { return { bool: false, } }, } </script>
****Subcomponents
<template> <div> <h4>Here are the subcomponents</h4> <div> <button @click="fun4">Click me to show the modified Boolean value{}</button> </div> </div> </template> <script> export default { props: { bool: { type: Boolean, required: true, }, }, methods: { fun4() { this.bool = !this.bool }, }, } </script>
Summary: the Boolean value passed from the parent component of props to the child component. After the child component modifies the Boolean value, the value in the child component will change, and the change will not flow to the parent component, that is, the original Boolean value in the parent component will not change, and vue gives a warning on the console that "the value passed by props cannot be modified inside the child component"..
To sum up, it can be concluded that if the data type passed by props is an object, it can be modified because the object is data of reference type. In other cases, the data types are basic types, and they are not allowed by vue. Then we can understand it as data flowing down props. When the data type is basic data type, the child component receives the parent group If you need to modify the value and synchronize the modified value to the parent component, you might as well try the combination of props modifier. sync and update. Please refer to another blog: https://blog.csdn.net/jsh1199/article/details/121699118