作者 | 扬帆向海责编 | 王晓曼出品 | CSDN 博客女朋友：“扬帆，你给我上一次讲了 vue 中的组件，我现在自己学习父子组件的传值，可是官方文档看不懂啊！你能不能通过父子组件传值的知识实现大头儿子和小头爸爸互相通信呢？”我：“可以呀！我先分别给你讲父组件向子组件传值和子组件向父组件传值，最后在给你写个案例，实现父子组件的相互通信。”点击【说话】按钮，大头儿子给小头爸爸传递消息。小头爸爸收到消息，点击【回复】按钮，给大头儿子发送消息。父组件向子组件传值1. 传值步骤① 子组件在props中创建一个属性，用以接收父组件传过来的数据；② 父组件中注册子组件。通过属性绑定(v-bind:)的形式，把需要传递给子组件的数据传递到子组件的内部，供子组件使用；③ 在子组件标签中添加子组件props中创建的属性；④ 把需要传给子组件的值赋给该属性。2. 代码示例

html><html lang="en"><head><meta charset="UTF-8"><title>父组件向子组件传值title><script src="js/vue.js">script>head><body><div id="app"><mycom :parent-msg='pmsg' :content='hello'>mycom>div><script>var vm = new Vue({el: '#app',data: {pmsg: '父组件中的内容',hello: '我是父组件传过来的'            },components: {mycom: {data: function () {return {msg: '我是子组件本身的数据'                        }                    },// 子组件在props中创建一个属性，用以接收父组件传过来的值                    props: ['parentMsg', 'content'],template: '

{{msg + "---" + parentMsg + "----" + content}}

'
                }
            }
        });script>body>html>【效果如下】3. 注意事项① prop 是子组件用来接受父组件传递过来的数据的一个自定义属性；②父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”；③prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来；④ props中的数据都是只读的，无法进行重新赋值。子组件向父组件传值1. 传值步骤① 子组件需要以某种方式例如点击事件的方法来触发一个自定义事件；② 将需要传递的值作为$emit的第二个参数，该值将作为实参传递给响应自定义事件的方法；③ 在父组件中注册子组件，在子组件标签上监听该自定义事件，并添加一个响应该事件的处理方法。2. 代码示例点击子组件中的按钮，给父组件发送子组件的信息：

<body><div id="app"><h3>父组件h3><child @receive="handleEvent">child>div><script>        Vue.component('child', {template: `

子组件

发送


            `,
            data() {return {
                }
            },methods: {
                sendMessage() { // 按钮的点击事件this.$emit("receive","父组件您好，我是子组件！") // 调用父组件传递过来的方法，并且把数据传递出去
                }
            }
        })var vm = new Vue({el: '#app',methods: {// 定义在子组件中通过 this.$emit() 调用的方法
                handleEvent(val) {console.log("父组件收到的消息是：",val)
                }
            }
        })script>body>【效果如下】3. 注意事项① 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！② 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：使用 $on(eventName) 监听事件；使用 $emit(eventName) 触发事件。③ 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。大头儿子小头爸爸案例这个案例实现了文章开头：大头儿子和小头爸爸之间的通信。

html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>父子组件通信title><script src="js/vue.js">script><style>.father,.son {width: 150px;height: 100px;        }.info {color: #446ee4;font-size: 20px;font-size: bold;        }.desc {font-size: 18px;        }.btn {width: 100px;float: left;height: 40px;font-size: 18px;color: #fff;font-weight: bold;background: #446ee4;margin-top: 15px;        }.parent,.child {display: inline-block;width: 550px;        }style>head><body><div id="app"><div class="parent"><img class="father" src="data:images/father.jpg"><div class="info">我是小头爸爸div><div v-if="msg !== ''" class="desc">小头爸爸接收到的消息:【{{msg}}】div><div v-if="replyMsg !== ''" class="desc">小头爸爸回复说:【{{replyMsg}}】div><button class="btn" @click="reply()">回复button>button>div><div class="child"><child :reply-msg="replyMsg" @listen="listenHandle($event)">child>div>div><script>        Vue.component('child', {props: {replyMsg: {type: String,default: ''                }            },template: `

我是大头儿子
大头儿子说:【{{msg}}】
大头儿子接收到的消息:【{{replyMsg}}】

说话


            `,
            data() {return {msg: ''
                }
            },methods: {
                say() {this.msg = '小头爸爸好！'this.$emit("listen", this.msg)
                }
            }
        })var vm = new Vue({el: '#app',
            data() {return {msg: '',replyMsg: ''
                }
            },methods: {
                listenHandle(val) {this.msg = val
                },
                reply() {this.replyMsg = '小头儿子好，消息已收到'
                }
            },
        })script>body>html>【效果如下】总结在组件传值过程中，无论是父传子、还是子传父，它们都有一个共同点就是有一个中间介质。父传子的介质是props中的属性，子传父的介质是自定义事件。父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。父组件通过 v-bind:绑定参数传给子组件，子组件通过props接受这个参数。在组件的最底层开始写事件，由最底层组件逐步向上$emit事件流，并携带相应参数，最后在父组件内完成总的数据处理。版权声明：本文为CSDN博主「扬帆向海」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/weixin_43570367/article/details/105854306

更多精彩推荐

☞中国最优秀的程序员都有哪些？王兴、张小龙、张一鸣是哪类？| 蒋涛说

☞前字节跳动程序员 28 岁提前退休引热议，网友：我也想！

☞听说你还没收到端午福利？程序人生来宠你！

☞秋名山老司机从上车到翻车的悲痛经历，带你深刻了解什么是 Spark on Hive！| 原力计划

☞MATLAB 被禁点燃导火索，国产软件路在何方？

☞破碎的互联网下，加密技术正在恢复数据主权！

你点的每个“在看”，我都认真当成了喜欢

a标签传值到另一个页面_用大头儿子和小头爸爸举例，就讲明白 vue 中父子组件的传值？ | 原力计划...相关推荐

  1. 通过大头儿子和小头爸爸，给女朋友讲明白了vue中父子组件的传值

    写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...

  2. Vue中父子组件如何传值

    关键词:props.$emit().绑定的数据和事件 文章目录 前言 一.将子组件引入父组件 二.父组件如何传值给子组件 三.子组件如何接收父组件传过来的值并使用(props) 四.子组件如何传值给父 ...

  3. Vue中父子组件之间传值 ，兄弟组件之间传值（两种方法）

    一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...

  4. Vue中父子组件传值的多种方式

    vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...

  5. vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）

    1. 子组件向父组件传值 子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...

  6. 六十一、Vue中父子组件传值和组件参数校验

    @Author:Runsen @Date:2020/10/17 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的日积月累,需要强大 ...

  7. Vue非父子组件之间传值

    <!DOCTYPE html> <html><head><meta charset="utf-8"><title>非父子 ...

  8. 开发笔记--Vue中不同组件的传值的几种方法

    父子组件传值 1.父传子 思路:父组件传值到子组件中,使用props进行传值 //子组件 <template><div></div> </template&g ...

  9. vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值

    父子组件传值: 父组件定义: 代码示例 子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...

  10. a标签传值到另一个页面_前端开发入门——HTML基础标签

    本文创建于2020年8月,以下为正文: HTML是用于创建可以从一个平台移植到另一平台的超文本文档的一种简单标记语言,经常用来创建web页面.HTML是制作网页的基础,我们在网络营销种讲的静态网页,就 ...

最新文章

  1. 某小型公司持续集成工具 jenkins 实践
  2. 4、变量和方法被static和final两个关键字修饰，为什么这么做？
  3. Swift中关于元组的某些特性
  4. 技本功丨知否知否，Redux源码竟如此意味深长（下集）
  5. 一次蚂蚁金服的辛酸面试历程
  6. 用户故事与敏捷开发方法笔记05
  7. 来自数据库的MVC 6动态导航菜单
  8. Chrome 扩展工具及命令
  9. java删除指定数据_java 从数据删除指定值
  10. 1.5多媒体技术的应用领域
  11. unity期末大作业消消乐小游戏（附下载链接）
  12. 红包裂变被动吸粉引流方法，如何通过红包裂变的方式吸粉
  13. java 出路 xls_java读取excel之xlsl超大文件
  14. 条件概率公式图解推导
  15. PMP新考纲 敏捷题目 （五）
  16. android studio生成JKS时候提示：JKS 密钥库使用专用格式。建议使用 keytool -importkeystore
  17. 牛顿下山法C++实现
  18. h5故障代码_格力变频空调显示故障代码“H5”维修方法与流程
  19. netty实战-自定义解码器处理半包消息
  20. D触发器转换为JK触发器

热门文章

  1. 4006.Cacti集监控IBM刀片服务器温度和风扇运行状态
  2. asp.net mvc cms项目Oxite
  3. “做人难，人难做，难做人，做男人更难啊！
  4. 最简单的方法实现小程序按钮跳转到指定界面
  5. php facebook授权登录获取头像_IdentityServer4从数据库获取User登录并对Claims授权验证（五）...
  6. PHPstorm链接服务器自动保存
  7. Unable to round-trip http request to upstream: EOF
  8. mac os 10.10 safari java插件_OS X 10.10 Yosemite强大而漂亮的Safari 8浏览器
  9. Yii Framework2.0开发教程（8）输入验证
  10. bootstrap——强大的网页设计元素模板