Vue中关于父子组件之间的通信

父子组件之间的通信是vue中的基础知识，在此做一个简单的梳理。
总的来说父传子是通过props，子传父是通过$emit。
简单的一个demo来说说，先上代码
父组件：

如图，HelloWorld是一个子组件，将它引入父组件并注册然后渲染这个自定义组件标签，第一点先看父向子传参，我们在父组件的data里定义了一个变量sw，并且在子组件标签上通过动态绑定的方式绑定了一个动态的qq变量来将sw变量传下去（凡是组件注入属性都得动态绑定，不然就会被当成字符串）
子组件：

子组件使用props接收参数，必须注意的是，props里的接收变量必须和动态绑定的那个变量一致，不然就接收不到，比如这儿都是用的qq这个变量，console如下

但是将接收变量改为mm时，console如下

到此，父组件向子组件传参就完成了。
接下来是子向父传参，前面说过是通过emit完成的，做法是在子组件内部当你需要向父组件传参时就自定义一个事件，如上图定义了一个ok的事件，这个事件不用做任何操作，需要做的是在父组件内去用v-on/@来监听这个事件，当监听到这个事件被传出时，那么print方法会自动执行，并且是自动获取到子组件传出来的参数作为print的入参(不需要写括号加形参的方式)，如果加了反而会报错

而正常时会是

然而会有报错

这是因为我们修改了由父组件传下来的参数，默认是不能直接修改props传进的参数的
还有就是props的写法，可以是像上图一样直接写数组，然后将接收变量定义成字符串，那么无论父组件传下来的是单个变量还是一个对象，其实都能被存进这个字符串的接收变量，当然还可以定义成对象的形式，同理，对象的属性名也必须和父组件传下来的保持一致

对象属性名改为了oo，就没有接收到数据
同样这儿的default可以去掉，他只是表示一种默认值

关于props还有一点是，它其实和data一样，都是定义数据的地方，只不过是props外部，data内部，
所以props里的变量名不能和data里的重复，会报错
关于emit也有几点：

它的原理是通过emit这个方法向父组件暴露自定义的事件ok，父组件监听这个自定义事件ok，当有参数self.qq被传出时，那么print方法将self.qq作为实际参数。
emit只能有两个参数，第一个是自定义事件，第二个是要传递的参数，若参数很多，那么只能将其包装成一个对象，然后在第二个参数传递出去。
至于为什么会加美元符号，是因为所有vue实例本身自带的属性在调用时都要加，比如根元素el，状态data，props在调用时都得加美元符号。

最后只得一提的是，这种父子组件的通信方式是典型的观察者模式。

Vue中关于父子组件之间的通信相关推荐

VUE 2.0 父子组件之间的通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent><child :child-com="content"></child ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
vue/父子组件之间的通信
父子组件之间的通信父组件绑定数据在组件上子组件props属性接收父组件内的data属性中待传的数据data1 => <cpn :data2="data1">& ...
Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...
VUE中的父子组件通信
VUE项目中的父子组件之间的传值. 首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的 ...
vue的父子组件之间的通信详解
vue的父子组件之间的通信详解一.父组件给子组件传值父组件引入子组件,并对子组件进行监听 <template><div><h1&g ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
React（一）父子组件之间的通信
无论是React,还是Vue,父子组件之间的通信都是组件式开发至关重要的一部分.备注一下基础要点. 1.父组件向子组件传值父组件向子组件传值是在调用子组件的时候通过参数传递给子组件 .父组件代码 i ...

Vue中关于父子组件之间的通信

Vue中关于父子组件之间的通信相关推荐

最新文章

热门文章