vue父子组件通信

xcold 发布于2019-08-23 14:16 / 754人阅读

组件目录结构

parent
child

API： $emit、 $on、 $refs、 props

1、父子组件通信

需求合理性我们先不考虑，demo就为了搞清怎么通信，我们要求：
1、父组件传值给子组件，同时父组件input输入框value也可同步到子组件
2、点击子组件加减子组件数字跟随变动，父组件input value跟随变动，

父组件

子组件

父组件引入子组件

import addChild from "@/components/add"

父子件注册子组件

//并在父组件内注册子组件
components:{
    addChild
}

父组件html

// v-bind:count="count" 父组件传递值给子组件，v-on:add="add"监听子组件 (用v-bind和v-on有助于更好的理解，熟悉了我们可以简化)

子组件接收父组件传递的值

props:{
        count:{
            //约定数据类型
            type: Number,
              //默认值
            default: 0
        }
    }

接收父组件传递的值count

发送事件

 methods:{
        add(){
            this.$emit("childAdd",this.count + 1)
        },
        reduce(){
            this.$emit("childReduce", this.count - 1)
        }
    }

//父组件监听子组件指令childAdd、childReduce 并触发父组件方法add、reduce

以上父组件穿值给子组件，子组件触发事件给父组件搞定，总结一下，父组件v-bind:count="count"穿值给子组件，子组件props：接收（props接收的父组件的值相当于子组件内定义data只不过不能直接修改疑问可搜索子组件为什么不能直接修改父组件值），继续，子组件定义方法并执行emit指令定义指令名字“childAdd、childReduce”，当子组件触发add、reduce方法触发emit并发指令给父组件，父组件v-on:childAdd（简写@childAdd）监听并触发父组件方法，如下图

接下来我们再用$on,监听指令不在dom内，直接写在js中上图

标注忽略了 child组件ref="addChild" 和普通获取操作dom一样

我们再看看console this.refs

这样我们就可以做到和dom内监听子组件一样的效果

当然这样写感觉恶心了不少，不过我是为了引出父组件直接操作子组件方法做个引子

给父组件加一个功能可以改变子组件显示值（还是那句话不管合不合理我们只看怎么实现）

同样还是用ref来获取子组件，这样可以直接触发子组件方法。

ok父子组件通信算是说完了

你的点赞是我的动力谢谢

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

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

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

Vue 组件间通信方式

摘要：本身提供哪几种通信方式首先灵感源于，支持双向绑定，本质还是单向数据流。跟一样，组件间最基本的数据流是通过向子组件传递数据。但是在却很少使用，因为组件可以自定义事件，即后面的组件间通信方式其实就是订阅发布模式。例子是在 jsrun.net 平台编写，不支持移动端平台，所以本文建议在 PC 端进行阅读。 Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数...

hss01248 2019-08-26 13:54 评论0 收藏0
Vue2.0父子组件间事件派发机制

摘要：从过来的都知道，在中，父子组件间事件通信的和被移除了。通过广播和事件分发的机制，就显得比较混乱了。在父组件中中然后，在子组件中，主要在任意事件回调中使用来触发自定义的事件，后面还可以加上参数传给父组件。从vue1.x过来的都知道，在vue2.0中，父子组件间事件通信的$dispatch和$broadcase被移除了。官方考虑是基于组件树结构的事件流方式实在是让人难以理解，并且在组件结...

xietao3 2019-08-21 18:40 评论0 收藏0
vue中8种组件通信方式, 值得收藏!

摘要：一父组件通过的方式向子组件传递数据，而通过子组件可以向父组件通信。而且只读，不可被修改，所有修改都会失效并警告。之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样...

BicycleWarrior 2019-08-26 10:44 评论0 收藏0
Vue.js 父子组件及非父子组件间实现通信

摘要：想使用值的话通过进行处理非父子组件间通信创建事件中心组件触发组件接收 1. 父组件与子组件通信父组件showImg(https://segmentfault.com/img/remote/1460000013945460); 子组件通过props来接收数据: 格式1： props: [childMsg] 格式2 : props: { childMsg: Array //指定...

lentrue 2019-08-22 15:40 评论0 收藏0
vue父子组件间通信

摘要：为此可以使用为子组件指定一个索引。访问子组件当和一起使用时，是一个数组或对象，包含相应的子组件。父子通信目前有四种方式： 1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件： //这里必须要用 - 代替驼峰data(){ return { msg: [1,2,3] };} 子组件通过props来接收数据:方式1：props: [childMs...

617035918 2019-08-23 11:51 评论0 收藏0