# 子父组件传参
父传子:
父组件:
<NavBar :NavBarTo="NavBarTo" :NavBarToStatus.sync="NavBarToStatus"></NavBar>
components:{
NavBar
},
data() {
return {
NavBarTo:0,//首页底部公共组件来源0123
NavBarToStatus:false,//是否触发请求总量的方法
}
}
子组件:
<div class="cart-jb" v-show="item.count">{{item.count}}{{NavBarToStatus}}</div>
<div class="foot-img"><img :src="index==NavBarTo?item.srcH:item.srcM"></div>
name: "NavBar",
props: {
NavBarTo:{
type:Number
},
NavBarToStatus:{
type:Boolean,
default: false,
}
},
watch: {//监听NavBarToStatus参数,监听方法名为参数名,返回值res即是当前参数数值
NavBarToStatus(res) {
if(res){
//this.cartTotal();
}
}
}
子传父: 参考https://www.jb51.net/article/142021.htm
子组件:
props: {
NavBarToStatus:{
type:Boolean,
default: false,
}
},
methods: {//$emit,updata默认方法
cartTotal:function(){
_this.$emit('update:NavBarToStatus', false);
}
}
父组件:参数后追加.sync即可
<NavBar :NavBarToStatus.sync="NavBarToStatus"></NavBar>
components:{
NavBar
},
data() {
return {
NavBarToStatus:false,//是否触发请求总量的方法
}
}
← css多次加载污染全局 子父组件多级调用 →