vue组件传递props是异步过程吗？
来源：18-1 商品详情页实现（1）
学东西要快
2018-01-13
之前认为vue组件传递props跟变量赋值一样应该是个同步操作
但是这里遇到了不能理解的地方（代码都是从老师源码上抄下来的）
goods组件代码片段
<food @add="addFood" :food="selectedFood" ref="food"></food>
selectFood(food, event) {
if (!event._constructed) {
return;
}
this.selectedFood = food;
this.$refs.food.show();
}food组件代码片段
props: {
food: {
type: Object
}
}
show() {
this.showFlag = true;
this.selectType = ALL;
this.onlyContent = true;
console.log(this.food.name); // 观测传入的props值
}
我想是不是因为props是异步传递的，在console.log的时候props还没有赋值完全，所以第一次点击商品输出undefined，第二次点击输出第一次点击的那个商品名。然后又因为vue数据驱动的特性（对数据驱动不是很理解，应该大概就是数据变了，dom也会自动跟着变），所以即使props接收滞后，但是又能正常显示页面。
不知道我理解是否有误，请老师指正
写回答
1回答
-
本质原因并不是异步传递，是因为你更新的是父组件的 selectedFood，而父组件数据变化到子组件的更新是一个异步过程，在 nextTick 后发生。所谓数据驱动就是数据变化了，DOM 会跟着自动变。所以当子组件的 prop 发生变化，拿到数据后，就可以正常渲染了。
022018-03-11
相似问题