vue3 子组件的值如何随着父组件的值改变而改变呢？
首先说一下为啥不发悬赏区，因为我的cb是负的，所以发到求助区来了。我想让我的子组件的值随着父组件值的修改而修改，但是我通过watch监听不到，不知道该咋整，求大佬帮忙瞅瞅。
其实就是我通过点击来修改ifshowinfo，然后传值到父组件，之后父组件再将修改好的ifshowinfo传递给另一个子组件，但是另一个子组件只能接受最初的ifshowinfo，我想让他随时都能监听到值的修改，咋整呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<script src="https://unpkg.com/vue@next"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#app {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
}
.header {
flex: 1;
position: absolute;
height: 5%;
text-align: center;
width: 100%;
}
.footer {
flex: 1;
height: 5%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.footer ul {
display: flex;
}
.footer ul li {
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.shoplist {
position: absolute;
margin-top: 2rem;
overflow:auto;
height: 90%;
}
.shoplist ul li div img {
width: 10rem;
height: 10rem;
}
.shoplist ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
</head>
<body>
<div id="app">
<shoptitle :ifshowShopInfo="ifshowShopInfo"></shoptitle>
<shoplist @ifshowshopinfo="getshow"></shoplist>
<footerlist></footerlist>
</div>
<script>
const app = Vue.createApp({
data() {
return {
ifshowShopInfo: ''
}
},
methods: {
getshow(data){
this.ifshowShopInfo = data
}
}
})
app.component("shoptitle", {
props: {
ifshowShopInfo: {
type: Object
}
},
template: `<div class="header" @click="djbtn">
<h2 v-if="!ifshowShopInfo">主页</h2>
<h2 v-if="ifshowShopInfo">商品详情页</h2>
</div>`,
data(){
return{
ifshow: this.ifshowShopInfo || ""
}
},
methods: {
djbtn(){
console.log(this.ifshowShopInfo)
}
},
watch: {
ifshowShopInfo(val) {
this.ifshow = val
},
ifshow(val) {
if (this.ifshowShopInfo !== val) {
console.log(this.ifshowShopInfo)
}
else {
console.log(this.ifshowShopInfo)
}
}
}
})
app.component("shoplist", {
data() {
return {
shoplist: [
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"},
{name: "德芙",price: "￥69.90",src: "df.jpg"}
],
ifshowShopInfo: false,
shopInfo: {name: "德芙",price: "￥69.90",src: "df.jpg"}
}
},
methods: {
showShopInfo(){
this.ifshowShopInfo = true
this.$emit("ifshowshopinfo",this.ifshowShopInfo)
}
},
template: `<div class="shoplist">
<ul>
<li v-for="(item,index) in shoplist" :key="index" v-if="!ifshowShopInfo" @click="showShopInfo">
<div><img :src="item.src" alt=""></div>
<div>{{item.name}} <span>{{item.price}}</span></div>
</li>
</ul>
<div v-if="ifshowShopInfo">
<img :src="shopInfo.src" alt="">
<p>{{shopInfo.name}} <span>{{shopInfo.price}}</span></p>
</div>
</div>`
})
app.component("footerlist", {
data() {
return {
footerlist:
}
},
template: `<div class="footer">
<ul>
<li v-for="(item,index) in footerlist" :key="index">{{item}}</li>
</ul>
</div>`
})
const vm = app.mount("#app")
</script>
</body>
</html> 解决了，是props中传值的变量名应该是全小写。 如果同一个父组件的子组件你可以用 this.$emit 来将值传递给父组件， 子组件用props属性接收父组件的参数变化。如果要是跨组件了，建议你去看看vuex，状态管理可以无视组件，全局有效。 那么为什么你的吾爱币是负数呢？ 父组件写ifshowShopInfo方法
页:
[1]