Vue是个以组件化开发著称的框架:于是组件间传值就经常被用到:
1、父传子:prop,slot
prop只是一个传值,子组件在script的prop中声明后可以直接进行使用
注意:prop传递值不能在子组件进行修改,不然浏览器会报错,需要通过赋值给子组件自身申明的元素才能进行修改
slot(插槽):与prop不同,插槽支持html语句插入以及组件插入,只要在子组件同样写上slot就能成功展示
注意: slot传值在父组件传值之后,在子组件进行使用需要用slot-scope属性进行声明
2、子传父:emit
父组件需要写一个方法用来接收子组件传递出来的数据,而子组件则可以通过$emit('方法米',数据)的方式进行父组件方法的触发和传值
注意:现在新增了一个传值的后缀.sync,通过这个后缀对于简单的状态修改,父组件可以不写方法,直接更新;
<parent :title.sync="title" ></parent>
<children @click="$emit('update:title',新数据)"></children>
如上所示:子组件只要通过updata: 拼接属性名,然后跟着新数据就可以成功更新状态
注意:新的后缀.sync不能与v-bind一起使用,也不能拼接表达式;但是你可以传一个数组进入