一个故事讲懂vue父子组件传值

xi4oh4o 发布于2019-08-23 18:19 / 3532人阅读

摘要：老王用笔在纸上写了好多内容，把纸纸相当于，也就是数据放进了信封信封相当于属性，也就是里，然后给了邮局相当于相当于一个中介，快递员进行派送，小明来到邮箱相当于，看到里边有封信相当于父组件的值，拿了出来。

讲故事前先讲代码

父组件向子组件传值

父组件数据传递给子组件可以通过props属性来实现
父组件：

子组件：

父向子传值总结：

v-bind:dataOfChild="dataOfParent"(父组件)====>props:["dataOfChild"](子组件)

子组件向父组件传值

子组件：

父组件：

子向父传值总结：

this.$emit("parentFunction","helloworld")(子组件)====>
v-on:parentFunction="customParentFunction"(父组件)====>
customParentFunction:function (data) {}(父组件)

接下来是强化记忆阶段：

情节一

话说，在遥远的大山那边，有一对父子，父亲叫老王，儿子叫小明。父亲由于岁数大了，平常就在家干点农活，小明为了养家，外出打工。
有一天，小明想爸爸了，拿起手机给爸爸发短信，子组件主动向父组件传值，小明拿起手机，调用sendDataToParent方法,在通讯录找到了爸爸的手机号，this.$emit的第一个参数，函数名，然后拿起手机，抠了一堆字：爸爸我想你了，最近怎么样？this.$emit的第二个参数，内容，然后发送~，短信传到了信号塔，child-component相当于基站，基站对所有短信进行监听，正好，基站的列表里有小明父亲的名单，===》v-on:parentFunction，然后，短信又由基站传到了老王那边，老王的手机铃想了：苍茫的天涯是我的爱绵绵的青山脚下花正开~~~响铃相当于调用customParentFunction方法，然后，值就传过来了。

情节二

但是呢，小明在外打工，有时工作比较忙，忘了给爸爸发短信，所以老王想儿子了，但老王比较保守，又没大上过学，也不会打字，所以写了封信，去了邮局。

老王用笔在纸上写了好多内容，把纸 纸相当于dataOfParent，也就是数据 放进了信封信封相当于属性，也就是v-bind:dataOfChild里，然后给了邮局相当于child-component,相当于一个中介，快递员进行派送，小明来到邮箱相当于props，看到里边有封信相当于父组件的值，拿了出来。
本文是作者第一次用情景故事的形式来写博客，也是一次新的尝试，如有不足，或者错的地方，还请大家多多指点。

GPU云服务器云服务器 vue父子组件通讯父子组件父子组件通信父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105039.html

Vue 组件间的传值（通讯）

摘要：组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用接收，子组件在模板里可以通过的形式进行使用。组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯 1 父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用props接收，子组件在模板里可以通过{{}}的...

CloudDeveloper 2019-08-29 16:12 评论0 收藏0
Vue 组件间的传值（通讯）

摘要：组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用接收，子组件在模板里可以通过的形式进行使用。组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯 1 父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用props接收，子组件在模板里可以通过{{}}的...

netmou 2019-08-23 10:31 评论0 收藏0
Vue 组件间的传值（通讯）

摘要：组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用接收，子组件在模板里可以通过的形式进行使用。组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯 1 父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用props接收，子组件在模板里可以通过{{}}的...

source 2019-08-02 11:03 评论0 收藏0
简单说说vue的父子组件，父子组件传值和vuex

摘要：我们需要在里改动一下代码首先就是绑定一个自定义事件再增加然后在中变成就是触发父组件中的方法所以，触发了父组件的函数，改变了父组件的的值，父组件再通过传值给子组件。从而实现数据传递，父子组件通信。一、vue的父子组件之间是如何传值的？首先呢，需要说说的是，vue既然有双向绑定，那为何会有父子组件之间的传值问题？这个问题也简单，vue的组件会供其他的vue页面进行调用，如果数组都是双...

Tecode 2019-08-22 18:31 评论0 收藏0
Vue 父子传值与子父传值

摘要：子实例可以用访问父实例，子实例被推入父实例的数组中。节制地使用和它们的主要目的是作为访问组件的应急方法。更推荐用和实现父子组件通信我是父组件中的数据我是我是号组件我是利用props父子传值父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用创建 Vue 实例，得到 Vie...

aisuhua 2019-08-23 17:14 评论0 收藏0