当前位置:Gxlcms > JavaScript > 在vue-cli中组件通信的方法

在vue-cli中组件通信的方法

时间:2021-07-01 10:21:17 帮助过:5人阅读

本文介绍了在vue-cli中组件通信的方法,分享给大家。具体如下:

vue组件之间的通信包括三种:

1.父组件向子组件通信
2.子组件向父组件通信
3.同级组件之间的通信

一.父传子组件通信

拿app.vue当父组件,content.vue当子组件

1.父组件中导入子组件(子组件导出)

  1. import contents from './components/content';

2.在父组件中注册子组件

  1. data() {
  2. return {
  3. test:'0'
  4. };
  5. },
  6. components:{
  7. 'v-header':headers,
  8. 'v-content':contents
  9. }

3.子组件通过props来接收数据

  1. <v-content :childs='test'></v-content>

二.子与父组件通信

子组件:

  1. <template>
  2. <div @click="down()"></div>
  3. </template>
  4. methods: {
  5. down() {
  6. this.$emit('down','null'); //主动触发down方法,'null'为向父组件传递的数据
  7. }
  8. }

父组件:

  1. <div>
  2. <child @down="changes" :test="test"></child> //监听子组件触发的down事件,然后调用changes方法
  3. </div>
  4. methods: {
  5. changes(msg) {
  6. this.test= test;
  7. }
  8. }

二.非父子组件通信

  1. //把a当作一个中转站
  2. var a = new Vue();

组件1触发:

  1. <div @click="eve"></div>
  2. methods:{
  3. eve(){
  4. a.$emit("change",'null')
  5. }
  6. }

组件2接收:

  1. <div></div>
  2. created(){
  3. a.$on('change',()=>{
  4. this.msg = 'null'
  5. })
  6. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行