三分钟让你了解 vue 中的父子通讯

vue 组件化开发.

• 什么是组件化开发.
  • 组件时可以复用的 vue 实例，封装标签，样式和 JS 代码

vue 组件分类:

• 1. 页面组件
• 2. 页面下的功能组件

组件化开发: 一个页面 (.vue) 可能有一个或多个组件 (.vue) 组成完整的页面功能

封装的思想 , 把页面上可以重复使用的部分封装成为一个组件，从而方便项目的开发和维护 一个页面，可以拆分成一个个组件，一个个组件就是一个独立的整体，可以拥有自己的结构。样式和行为.

vue 组件的封装与使用.

为什么要封装组件

• 复用。封装一次可以多次使用
• 方便维护和代码的整理.

使用步骤.

1. 先定义一个组件 先创建创建一个名为 MyCom 的组件，并在 App.vue 中使用 2. 在 App.vue 中注册组件

3. 使用组件.

注意：组件的名字不能和现有的 html 标签名一致

在 vue 中存在多个组件样式名相同，从而产生出冲突的问题.

• 因为在 vue 中默认组件 style 中定义的样式是全局的，所以存在相同名字覆盖的情况，从而导致效果出不来产生冲突。我们怎么解决这个冲突呢.

局部样式：在 style 标签上加上 scoped 属性.

原理

• 在 style 上加入 scoped 属性，就会在此组件的标签上加上一个随机生成的 data-v 开头的属性
• 而且必须是当前组件的元素或子元素的根元素才会有这个自定义属性

• 如果在 style 上加上 scoped, 组件内的样旨在当前的 vue 组件生效，相反，样式就是全局的.

当然在父子组件都设置了 scoped 属性的情况下，父组件中怎么控制子组件中的样式，这个时候我们就需要用到.vue组件中的深度作用选择符. /deep/属性来解决这个问题

vue 组件通信.

• 怎样在组件之间做通讯？
  • 因为每个组件的变量和值都是独立的 => 如果想要获取对方页面中定义的变量应该怎么做呢？

  我们先来看一下他们之间的关系图.

父组件传子组件通讯

• 在 App.vue 中导入 MyCom.vue 并使用，这个时候我们称 App.vue 这个组件为父组件，MyCom.vue 组件是子组件.
• 那么我们要怎么导入并使用这个组件呢.

我们先创建一个文件夹，在里面创建一个 App.vue 组件和 MyCom.vue 组件.

1. 然后在父组件中将你需要传的值自定义一个属性

2. 在子组件用，用 props 接收这个自定义属性。我们就可以在子组件中使用父组件中的值了.

在 vue 中我们需要遵守单向数据流的原则.

1. 在父传子的前提下，父组件的数据会发生通知子组件自动更新. 2. 子组件内部，不能直接修改父组件传递过来的 props (props是只读的)

意思就是父组件中的数据传过去了之后，子组件只能使用父组件传过去的数据不能修改父组件中的数据，修改之后就会报错。我们把这中现象叫做，vue 中的单项数据流

• 说明: 父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新；但不能改变引用地址
• props 的值不能重新赋值。但是引用类型子组件可以修改父组件

子组件传父组件通讯

• 什么是子组件传父组件通讯。指的是从子组件内部把数据传出来给父组件使用或者修改父组件数据

关系图.

• 父组件中：<子组件 @自定义事件名 1="父 methods 函数 1" @自定义事件名 2="父 methods 函数 2" />
• 子: this.$emit ("自定义事件名 1", 传值 1) ---> 执行父 methods 里函数代码

1. 我们现在父元素中自定义一个事件

2. 在子组件中用 $emit 语法来执行父元素中的函数代码.

• 好了，这就是 vue 中的组件与组件通讯间的用法.

总结: 父传子通讯就是在父元素中设置一个自定义属性.在子组件中用props接收. 子传父就是在父组件之中自定义一个事件在子组件中用$emit语法接收就可以调用父组件中的事件了

源码附件已经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27

百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址

码云地址： http://github.crmeb.net/u/defu

Github 地址： http://github.crmeb.net/u/defu