共计 1729 个字符，预计需要花费 5 分钟才能阅读完成。
第一种情况：简单传值，子组件只负责显示；父组件向子组件传递一个 hello word; 子组件接收并显示出来；父组件 Father.vue
<template>
<div id=”app”>
<Child :msg = “message”/>
</div>
</template>
<script>
import Child from ‘./Child’
export default {
name: ‘App’,
data() {
return {
message: “”
}
},
components: {
Child
},
mounted() {
this.timer = setTimeout(() => {
this.message = “hello world”;
}, 3000)
}
}
</script>
子组件 Child.vue
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
name: ‘App’,
props: [
“msg”
]
}
</script>
<style>
</style>
第二种情况：父组件向子组件传值，子组件接收传值并修改传值并显示到页面上；我们可以使用 watch 监听值的改变，当然我们也可以使用计算属性；我们先来说第一种使用 watch 监听：父组件不变；
子组件 Child.vue
<template>
<div>
{{childMsg}}
</div>
</template>
<script>
export default {
name: ‘App’,
props: [
“msg”
],
data() {
return {
childMsg: “”
}
},
watch: {
msg(newVal) {
if(newVal !== “”) {
this.childMsg = newVal + “—-child”;
}
}
}
}
</script>
<style>
</style>
说完了监听的，我们再来说一说计算属性的；父组件不变子组件 Child.vue
<template>
<div>
{{childMsg}}
</div>
</template>
<script>
export default {
name: ‘App’,
props: [
“msg”
],
computed: {
childMsg() {
return this.msg + “—-child”;
}
}
}
</script>
<style>
</style>
当然我们可以给计算属性设置 get, 和 set 方法，我在项目中就用到了这种方法，父组件传递给子组件一个对象，在子组件里接收这个对象，并修改这个对象；父组件 Father.vue
<template>
<div id=”app”>
<Child :value = “data”/>
</div>
</template>
<script>
import Child from ‘./Child’
export default {
name: ‘App’,
data() {
return {
data: null
}
},
components: {
Child
},
mounted() {
this.timer = setTimeout(() => {
this.data = {
“name”: “south Joe”,
“age”: 16,
}
}, 3000)
}
}
</script>
子组件 Child.vue
<template>
<div>
{{message}}
<button @click=”handleModify”> 修改年龄，姓名 </button>
</div>
</template>
<script>
export default {
name: ‘App’,
props: [
“value”
],
computed: {
message: {
get: function() {
if(this.value) {
return [this.value.name,this.value.age]
}
},
set: function(newValue) {
this.value.name = newValue[0];
this.value.age = newValue[1];
}
}
},
methods: {
handleModify() {
this.message = [“yangyang”,17];
}
}
}
</script>
<style>
</style>
职场小白 south Joe，望各位大神批评指正，祝大家学习愉快！