实现vue的组件化,是很好,但是组件之间传值也好,本来对vue的理解可能也较浅吧
一、父组件向子组件传值
peopleName为要传递的值;
父组件:
<li v-bind:peopledetail="peopleName" keep-alive></li>
子组件:
export default {
name:"baseAchievement",
props:['peopledetail'],
}
<div>{{peopledetail}}</div>
这样是能显示出来(显示的方式)
但是 要想在methods的方法中拿到this.peopledetail,根本拿不到,拿到的方法
法一、监听(数据变化时)
this.$watch('this.$watch('peopledetail', function(newVal, oldVal){
self.peopleName = newVal; 能拿到
});
但是我遇到了点击后peopleName变化,切换Tab页peopleName并没有变化,导致根本就不执行监听函数,更拿不到peopledetail的值了
法二、把peopleName 监听后放在缓存里,从缓存中获取(解决了但感觉不是最好方法)
this.$watch('peopledetail', function(newVal, oldVal){
localStorage.setItem("value", newVal);
barQuest();
});
function barQuest(){
console.log(localStorage.getItem("value"));
}
barQuest();
二、子组件向父组件传值
子组件
this.$emit('contrast-say',{传递的值});对象或者是单个值
父组件
<li v-on:contrast-say="listenTocontrast" ></li>
methods: {
listenTocontrast: function (data){
console.log(data)
}
}