每段记忆都是零碎的，犹如残破的蛛丝，无声无息的藏在黑暗的角落里------桐华

我今天简短测试了一下：

编写一个组件，给它设置一个props属性user

这里给它一个默认值{ age: 21 }

|------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | hljs vue <template> <div> <slot :user="user">默认内容</slot> </div> </template> <script> export default { props: { user: { type: Object, default: () => ({ age: 21 }) } } }; </script> |

然后我们在外部引用该组件并传入该props

编写一个方法来改变当前userInfo的值

|------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | hljs vue <template> <div> <navigation-link ref="navigationLink" :user="userInfo"> <template #default="{user}"> <div>user:{{ user }}</div> <div>user.name:{{ user.name }}</div> </template> </navigation-link> <button @click="click">userInfo:{{ userInfo }}</button> </div> </template> <script> import NavigationLink from '@/components/navigation-link.vue'; export default { components: { NavigationLink }, data() { return { userInfo: { gender: 'MALE' } }; }, methods: { click() { this.userInfo.name = 'ruben' this.$forceUpdate() } } }; </script> |

当前效果如下：

我们触发该事件，发现使用$forceUpdate使外部的userInfo成功更新

但slot中的视图并未更新

我们换成$set

|---------------|-------------------------------------------------------------------------------| | 1 2 3 | hljs javascript click() { this.$set(this.userInfo, 'name', 'ruben'); } |

再来试试，发现成功绑定

此处如果我们没有传入名为user的prop

我们也可以通过$refs直接直接绑定

|---------------|------------------------------------------------------------------------------------------------| | 1 2 3 | hljs javascript click() { this.$set(this.$refs.navigationLink.user, 'name', 'ruben'); } |

效果：