请注意,本文编写于 272 天前,最后修改于 272 天前,其中某些信息可能已经过时。
这是我在学习vue3.0的时候,遇到的一个问题,当时困扰了我好久好久。
我依稀记得应该是只要接受值,然后修改父组件的值,然后子组件就会跟着改变。
但是不管我怎么改都没有修改成功,最后在思否的问答区找到了答案。
我们需要传值的变量-->命名应该是小写才对,如果是像我这样ifShowInfo的话,是找不到这个值的,所以我们将它改成ifshowinfo就能找到值了,并且会随着父组件的值改变而改变
<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>