为了能够在父子组件中实现双向控制,需要以下的步骤:
第一步:子组件中挖坑
(1)在需要父组件填充具体内容的地方挖坑,方式为
通过slot和name指定坑
第二步:父组件中填坑(具体内容)
(1)引入子组件作为其中一个模块
在父组件的script中通过import引入,然后通过components进行挂载,最后以标签的形式使用
(2)在子组件模块区域内,使用slot="name的值"指定需要填的坑
//填坑的内容 加入购物车成功
上述两步只是实现了组件简单内容的填充,但涉及到值的传递,及控制时还需如下的操作
(1)父组件中的值传递到子组件中:
子组件使用props拿到传递过来的值(在子组件的export default中)
此时父组件与值组件的代码为:
父组件:
//Modal是子组件在父组件中 请先登录,否则无法加入购物车!
子组件中代码为:
(2)子组件控制父组件中的值:实质上通过子组件的方法间接 通过$emit方法去调用父组件中的方法,
例如父组件有一个方法为close
//Modal是子组件在父组件中 请先登录,否则无法加入购物车!
(2)子组件中需要触发父中绑定的close方法
Close
初学阶段简单总结一下:子组件中挖坑,父组件填坑。
前面两步骤只是简单实现组件的加载,对于有值传递和控制,需要通过该后面两步的props接受来自父组件的值 和$emit触发父组件的方法实现。
posted on 2017-11-25 13:21 阅读( ...) 评论( ...)