Vue的一个核心概念是组件化,组件化就是把整个页面分成不同的组件来进行管理,分成了不同的组件就会出现不同的组件之间进行传值的问题。现在介绍一种利用vue的props来实现父子组件的传值。
首先实现父组件给子组件传值
代码如下父组件
子组件
第一种,父组件给子组件传值的情况
直接加上属性名goodlist,前面用v-bind表示的是动态传值,如果想要传静态的值,去掉v-bind就可以了。
这样传了值以后,在子组件中接收的方式为用props对象,用属性名作为key,对象值为对这个传的值进行的一些限制,如传的值类型,还可以对其进行验证。限制完以后,就可以直接用了,相当于data中的数据的使用方法一样。
第二种子组件给父组件传值
然后是子组件给父组件传值。因为props是单向数据流,不能直接在子组件中修改父组件中的值。所以需要使用监听事件的方式进行修改数据。在子组件中调用方法的时候触发父组件中监听的方法changeFather。这个方法在父组件中@changeather进行监听,当触发这个事件的时候,在父组件中执行addGood方法.根据子组件中传的值来在父组件中修改父组件中的值。