父传子遇到了异步问题
父级想给子级传个参数,然后console.log打印出来显示 子级先触发,父级后触发,所以子级没有取到值
解决方法:用watch去监听,就可以正常拿到值了
父级
// 引入的子级模块
<header :headline-title="headlineTitle"></header>
<script>
import header from "@/路径/header.vue";
export default {
components:{
header
},
data() {
return {
headlineTitle: "传个子级的标题"
}
}
}
</script>
子级
<div>{{mobileTitle}}</div>
export default {
data() {
return {
mobileTitle:'',
};
},
props:{
headlineTitle: {
type: String,
default: ''
}
},
watch:{
headlineTitle(val){
console.log('watch head',val);
}
},
created() {
this.mobileTitle = this.headlineTitle
console.log(this.headlineTitle,this.mobileTitle,"watch here");
}
}
打印展示
我这是两个页面都引入这个组件了