vue3.0 子组件的props的值不随着父组件值的改变而改变该怎么解决?

这是我在学习 Vue 3.0 时遇到的一个问题,当时困扰了我好久好久。

我依稀记得应该是只要接受值,然后修改父组件的值,然后子组件就会跟着改变。

但是不管我怎么改都没有修改成功,最后在思否的问答区找到了答案。

我们需要传值的变量–>命名应该是小写才对,如果是像我这样 ifShowInfo 的话,是找不到这个值的,所以我们将它改成 ifshowinfo 就能找到值了,并且会随着父组件的值改变而改变。

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
<div id="app">
<h2 @click="Change">哈哈哈哈</h2>
<titles :ifshowinfo="ifshowinfo"></titles>
</div>
<script>
const app = Vue.createApp({
data() {
return {
ifshowinfo: false
}
},
methods: {
Change() {
this.ifshowinfo = !this.ifshowinfo
console.log(this.ifshowinfo)
}
}
})
app.component("titles", {
props: {
ifshowinfo: {
type: Boolean,
default: false
}
},
template: `<div>{{ifshowinfo}}</div>`

})
app.mount("#app")
</script>

vue3.0 子组件的props的值不随着父组件值的改变而改变该怎么解决?

http://www.datehoer.com/posts/69c5e438-6e80-11ee-a697-01b0896cf41d/

作者

datehoer

发布于

2021-09-26

更新于

2023-10-19

许可协议

评论