博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue中父子组件传递信息实现
阅读量:6407 次
发布时间:2019-06-23

本文共 1125 字,大约阅读时间需要 3 分钟。

为了能够在父子组件中实现双向控制,需要以下的步骤:

第一步:子组件中挖坑

(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 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/wfaceboss/p/7895067.html

你可能感兴趣的文章
具体数学第二版第四章习题(1)
查看>>
高效前端优化工具--Fiddler入门教程
查看>>
【翻译】我钟爱的HTML5和CSS3在线工具
查看>>
Java多线程学习(吐血超详细总结)
查看>>
css3 变形
查看>>
Win7 64bit 安装Mysql5 出错 无法启动服务。
查看>>
嵌入式 H264参数语法文档: SPS、PPS、IDR以及NALU编码规律
查看>>
初识Opserver,StackExchange的监控解决方案
查看>>
给大家讲解一下JavaScript与后台Java天衣无缝相结合
查看>>
探索HTML5之本地文件系统API - File System API
查看>>
javascript有用代码块(1)
查看>>
libevent 笔记
查看>>
PHP实现人人OAuth登录和API调用
查看>>
redis源码笔记 - initServer
查看>>
FindBugs工具常见问题
查看>>
ECSHOP报错误Deprecated: preg_replace(): The /e modifier is depr
查看>>
【iOS】iOS之Button segue弹出popOver消除(dismiss)问题
查看>>
java多线程系列5-死锁与线程间通信
查看>>
数据库分库分表
查看>>
腾讯Hermes设计概要——数据分析用的是列存储,词典文件前缀压缩,倒排文件递增id、变长压缩、依然是跳表-本质是lucene啊...
查看>>