vue中父子传值及vue中$refs、$emit、$on、$parent、$children使用的理解

一 子传父(对$emit的理解)

作用
子组件可以使用 $emit 触发父组件的自定义事件。
语法
vm.$emit( event, arg ) //触发父级实例上的事件

对于vue.js中的this.emit的理解：
举例 : this.emit(‘increment1’,”加参数”)；
其实它的作用就是触发自定义函数。此外,可以子组件传参数给父组件
综述,即子组件调用父组件的方法并传递数据
具体应用如下

子组件

父组件

二 父传子

父组件可以使用 props 把数据传给子组件。
子组件通过props拿到父组件传来的数据。

父组件

子组件

props: {
     DeiMap:{
         type:Object,
         required: true
     }  
  },
 mounted () {
 // 子组件通过props拿到父组件传来的数据,是个对象,直接this.DeiMap可以使用数据
     console.log('obj==',this.DeiMap)  
  },

prop的单向数据流

vue官方:
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

如下

image.png

可以这样理解
父传子 prop是单向数据流

如果在子组件中已经接受了值,这时在子组件内直接再次改变这个值,会出现问题,vue不允许这样操作,vue规定了props是单向数据流传值

解决方法
在data中定义一个第三方的变量接收数据(即克隆数据),这个第三方变量即可更改
同时,在mounted阶段赋值给这个变量

三 $refs的使用

$refs作用1   =>  在DOM元素上使用$refs可以迅速进行dom定位

$refs作用2   =>  在组件上使用ref属性，可以通过$refs实现对子组件操作
即$refs是父组件调用子组件的方法，可以传递数据

首先给子组件做标记。demo ：
然后在父组件中，通过this.$refs.one就可以访问了这个自组件了，包括访问自组件的data里面的数据，调用它的函数

注意1
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例
当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组

注意2
$refs不能在created生命周期中使用 因为在组件创建时候 该ref还没有绑定元素
它是非响应的，所以应该避免在模板或计算属性中使用 $refs ,它仅仅是一个直接操作子组件的应急方案
当使用v-for的元素或组件，引用信息$refs将是包含DOM节点的或组件实例的数组，类似$children的使用

父组件

子组件

四 $on的使用

待补充

五 $parent

vue 里 this.$parent 作用
$parent在子组件中调用父组件的方法或获得其数据
this.$parent 可以访问到父组件上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }

如 this.$parent.List = []; 表示访问到父组件中data的数据list数组

区分
1、ref为子组件指定一个索引名称，通过索引来操作子组件；
2、this.$parent 可以直接访问该组件的父实例或组件；
3、父组件也可以通过this.$children 访问它所有的子组件，
$parent和$children 可以递归向上或向下无线访问， 直到根实例或最内层的组件。

六 $children

他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；

for(let i=0;i

七 children的案例

父组件index.vue

子组件1

子组件2