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

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

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

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

子组件

<template>
  <button @click="emitEvent">点击我</button>
</template>
<script>
  export default {
    data() {
      return {
        msg: "我是子组件中的数据"
      }
    },
    methods: {
      emitEvent(){
        this.$emit('my-event', this.msg)
        //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
      }
    }
  }
</script>

父组件

<template>
  <div id="app">
    <child-a @my-event="getMyEvent"></child-a>
    <!--父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->
  </div>
</template>
<script>
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    methods: {
      getMyEvent(msg){  // msg是个形参value,实质是接收的子组件传来数据的参数
          console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
      }
    }
  }
</script>

二 父传子

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

父组件

<template>
  <div id="app">
      <div class="transac-del">
                <div>
                    <span class="sub_title">交易详情</span>
                </div>
                <p>
 // v-if的原因是调接口回来数据是个异步操作,因此给个条件判断,数据不为null的时候才传数据给子组件,以免数据一开始拿到的是空对象
                    <transacDet v-if="deiMap" :DeiMap = 'deiMap' />    // 子组件,并且在数据模型中定义deiMap:null
                </p>
      </div>
  </div>
</template>

子组件

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

prop的单向数据流

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

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

如下

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

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

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

 

三 $refs的使用

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

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

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

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

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

父组件

<template>
  <div id="app">
    <child-a ref="child"></child-a>
    <!--用ref给子组件起个名字-->
    <button @click="getMyEvent">点击父组件</button>
  </div>
</template>
<script>
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    data() {
      return {
        msg: "我是父组件中的数据"
      }
    },
    methods: {
      getMyEvent(){
          this.$refs.child.emitEvent(this.msg);
          //调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
      }
    }
  }
</script>

子组件

<template>
  <button>点击我</button>
</template>
<script>
  export default {
    methods: {
      emitEvent(msg){
        console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
      }
    }
  }
</script>

四 $on的使用

vue中使用 $emit(eventName) 触发事件，使用 $on(eventName) 监听事件

  $emit(eventName)  触发当前实例上的事件，附加参数都会传给监听器回调。

  $on(eventName) 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

e.g1 本页面单个事件

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">点击</el-button>
  </section>
</template>

<script>
  export default {
    methods: {
      isClick() {
        this.$emit('isLeft', '点击事件！');
      }
    },
    mounted() {
      this.$on('isLeft', (val) => {
        console.log(val);
      });
    }
  }
</script>

以上代码，是通过按钮的点击事件，然后this.$emit传递事件，然后this.$on捕获本页面的事件

e.g2 本页面多个事件

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">点击</el-button>
    <el-button type="primary" @click="isClickOther">点击</el-button>
  </section>
</template>

<script>
  export default {
    methods: {
      isClick() {
        this.$emit('isLeft', '点击事件！');
      },
      isClickOther() {
        this.$emit('isRight', ['点击1', '点击2']);
      }
    },
    mounted() {
      this.$on('isLeft', (val) => {
        console.log(val);
      });
      this.$on('isRight', (...val) => {
        console.log(val);
      });
      this.$on(['isLeft', 'isRight'], () => {
        console.log(666);
      });
    }
  }
</script>

以上例子，是本页面的两个点击事件，可以同时监听两个事件，也可以同时传多个参数

e.g3  非父子组件传值（通过bus传值）

子组件1

<template>
  <section>
    <h1>left</h1>
    <el-button type="primary" @click="isClick">点击</el-button>
  </section>
</template>

<script>
  import eventBus from '~/utils/eventBus';
  export default {
    methods: {
      isClick() {
        eventBus.$emit('isLeft', '点击事件！');
      }
    }
  }
</script>

子组件2

<template>
  <section>
    <h1>right</h1>
    {{ name }}
  </section>
</template>

<script>
  import eventBus from '~/utils/eventBus';
  export default {
    data() {
      return {
        name: 'right默认值'
      };
    },
    mounted() {
      eventBus.$on('isLeft', (info) => {
        this.name = info ;
      });
    }
  }
</script>

父组件

<template>
  <section>
    <el-row>
      <el-col :span="12">
        <left/>
      </el-col>
      <el-col :span="12">
        <right />
      </el-col>
    </el-row>
  </section>
</template>

<script>
  import left from '~/components/left'
  import right from '~/components/right'
  export default {
    components: {
      left,
      right
    }
  }
</script>

以上例子就是 left组件传值给bus，然后right组件监听bus的isLest事件，当left组件触发事件的时候，right组件就会触发方法，替换页面的值

 总结

1.使用$emit传递事件

2.使用$on监听事件

3.可以本页面使用，也可以父子组件使用，也可以非关联组件使用

五 $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<this.$children.length;i++){
          console.log(this.$children[i].children_data);
          this.$children[i].children_fun();
        }

七 parent和children的案例

父组件index.vue

<template>
<div>
  <testVue ref="childVue"></testVue>  <br/><br/>
  <testVue2></testVue2> <br/><br/>
  <button @click="clickChild1">点击访问子组件</button> <br/><br/>
  <button @click="clickChild2">点击访问子组件2</button>
</div>
</template>
<script>
import testVue from './testVue'
import testVue2 from './testVue2'
export default {
  data(){
    return {
      total: 0
    }
  },
  methods: {
    clickChild1(){
      console.log(this.$refs.childVue.counter);
    },
    clickChild2(){
       console.log(this.$children[1].testval);
    }
  },
  components: {
    testVue,
    testVue2  
  }
}
</script>

子组件1

<template>
<div>
  <button @click="parentClick">点击访问父组件</button>
</div>
</template>
<script>
export default {
  data(){
    return {
      counter: 0
    }
  },
  methods: {
    parentClick(){
       console.log(this.$parent.total);
    }
  }
}
</script>

子组件2

<template>
<div>
</div>
</template>
<script>
export default {
  data(){
    return {
      testval: '2222'
    }
  }
}
</script>