vue中props的使用

Vue的一个核心概念是组件化,组件化就是把整个页面分成不同的组件来进行管理,分成了不同的组件就会出现不同的组件之间进行传值的问题。现在介绍一种利用vue的props来实现父子组件的传值。

首先实现父组件给子组件传值

代码如下父组件



子组件



第一种,父组件给子组件传值的情况

直接加上属性名goodlist,前面用v-bind表示的是动态传值,如果想要传静态的值,去掉v-bind就可以了。

这样传了值以后,在子组件中接收的方式为用props对象,用属性名作为key,对象值为对这个传的值进行的一些限制,如传的值类型,还可以对其进行验证。限制完以后,就可以直接用了,相当于data中的数据的使用方法一样。

第二种子组件给父组件传值

然后是子组件给父组件传值。因为props是单向数据流,不能直接在子组件中修改父组件中的值。所以需要使用监听事件的方式进行修改数据。在子组件中调用方法的时候触发父组件中监听的方法changeFather。这个方法在父组件中@changeather进行监听,当触发这个事件的时候,在父组件中执行addGood方法.根据子组件中传的值来在父组件中修改父组件中的值。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。