该篇博客探讨了在Vue中，父组件如何将初始信息传递给子组件，并通过子组件的watch监听属性变化，对数据进行加工处理。子组件在接收到父组件的值后，更新自身的表单双向绑定值，同时提供了方法将处理后的值反馈给父组件。示例代码展示了如何在`parent.vue`和`son.vue`之间进行有效的数据交互和处理。
父组件传值给子组件后，子组件中对值进行加工处理，进行展示，同时子组件值是表单双向绑定的值。此时可通过watch监听子组件的props值，然后对子组件变量进行初始化。尝试过用computed，双向绑定的值需要设置set。
示例：
parent.vue
import 'Son';
export default{
name: 'parent',
componets:{Son},
data(){
return{
initInfo: null
}
},
method:{
getSonInfo(val){
console.log(val.name,val.skill);
}
},
mounted(){
this.initInfo = {
name: '李白',
skill: '青莲剑歌'
}
}
}
son.vue
name:
skill:
export default{
name: 'Son',
props:{
initInfo: null
},
data(){
return{
name: null,
skill: null
}
},
watch: {
initInfo(val){
this.name = `国服${val.name}`;
this.skill = `大招：${val.skill}`;
}
},
method:{
btnClickHandle(){
this.$emit('getSonInfo', {name: this.name,skill: this.skill});
}
}
}
}
扫一扫
5460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
