关注“青年码农”公众号
回复“特效源码”可获取各种资料
Vue官方对单向数据流的描述是这样的(去掉了几句):父子 prop 之间形成了一个单向下行绑定,父级 prop 的更新会向下流动到子组件中,额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。
意思是说,父级给子组件是啥,子组件可以用,也可以不用,但是不能修改。这就保证了数据可控性,但是事实真的如此吗?官方文档下面还有一句话。
注意:JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
对JavaScript数据类型了解的小伙伴,应该很好理解这句话的意思,如果不了解的,可以读了解。这里就不过多说。
1 基本数据类型传递
我们先来传递基本数据类型,然后在子组件中修改,看控制台如何提示
首先定义一个父组件,只引用一个子组件,只传递一个基本数据类型的index
<div>
<Footer :index="index"> </Footer>
</div>
</template>
<script>
import Footer from "@/components/Footer";
export