第一:传递string、number等基本数据类型:
在构建vue项目中,props是子组件获取父组件的一种形式;在子组件中不可修改父组件传递的参数,代码如下:
1、父组件代码:
<template>
<div class="hello">
<childComponent @touchParentFuc="touchParentFuc" :fatherPassChild="fatherPassChild"></childComponent>
</div>
</template>
<script>
import childComponent from './childComponent'
export default {
name: 'HelloWorld',
components: {
childComponent
},
data () {
return {
msg: 'Welcome to Your Vue.js App',
fatherPassChild: '父传子'
}
},
methods: {
touchParentFuc () {
console.log(this.fatherPassChild)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
2、子组件代码:
<template>
<div class="hello">
<div>这是子组件</div>
<div>这是父组件的值:{{fatherPassChild}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: ['fatherPassChild'],
created () {
this.touchParentFuc()
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
touchParentFuc () {
this.fatherPassChild = '888'
this.$emit('touchParentFuc')
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
注释:
页面展示子组件修改后的值:
“这是子组件
这是父组件的值:888”;
在子组件中,尝试修改父组件传递过来的值,此时chrome控制台会报错:[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: "fatherPassChild"
;
同时,父组件中,打印的字段为修改之前的字段:
父传子 。
第二:传递数组、对象等引用型数据类型:
如果通过props传递引用数据类型,在子组件中改修父组件的属性值,会出现什么情况?撸码如下:
1、父组件代码:
<template>
<div class="hello">
<childComponent @touchParentFuc="touchParentFuc" :fatherPassChild="fatherPassChild"></childComponent>
</div>
</template>
<script>
import childComponent from './childComponent'
export default {
name: 'HelloWorld',
components: {
childComponent
},
data () {
return {
msg: 'Welcome to Your Vue.js App',
fatherPassChild: {
objData: 'my is object'
}
}
},
methods: {
touchParentFuc () {
console.log(this.fatherPassChild)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
2、子组件代码:
<template>
<div class="hello">
<div>这是子组件</div>
<div>这是父组件的值:{{fatherPassChild.objData}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: ['fatherPassChild'],
created () {
this.touchParentFuc()
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
touchParentFuc () {
this.fatherPassChild.objData = 'object is my'
this.$emit('touchParentFuc')
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
注释:
此时,页面展示的内容是子组件修改后;同时,控制台并没有报错;why?
按照官网的解释:
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。
简单总结:1、在使用props传递数据的过程中,如果传递的是基本数据类型,则在子组件中不能修改父组件传递过来的值,此时符合vue的单向数据流方式;
2、如果传递的是引用型数据类型,则此时可以在子组件操作父组件传递过来的值,此时数据可以双向通信,违背单向数据流方式。
个人理解:props传递参数不同,导致子组件是否能更改父组件props传递的值;跟const声明变量类似。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。