这是sylu计算机协会第一次技术征文活动

Vue实现组件之间的数据共享

一.组件之间的关系

项目开发过程中，组件常见的关系分为如下两种：

1. 父子关系
2. 兄弟关系

组件关系简图

二.父组件向子组件共享数据

方法：父组件向子组件共享数据需要使用自定义属性

在子组件中通过props属性与父组件的数据进行绑定

代码实例：

//父组件
<template>
  <div>
    <h3>Father</h3>
    <Son :msg="message" :user="userinfo"></Son>
  </div>
</template>
<script>
import Son from './components/Son.vue'
export default {
  data() {
    return {
      message: 'Hello',
      userinfo: { name: 'Louis', age: 19 }
    }
  },
  components: {
    Son
  }
}
</script>

//子组件
<template>
  <div>
    <h3>Son</h3>
    <p>父组件传递过来的msg值是{{msg}}</p>
    <p>父组件传递过来的user值是{{user}}</p>
  </div>
</template>
<script>
export default {
  props: ['msg', 'user']
}
</script>
​

结果演示：

三.子组件向父组件共享数据

方法：子组件向父组件共享数据使用自定义事件

通过 $emit() 来触发自定义事件

代码实例：

//父组件
<template>
  <div>
    <h3>Father{{countFromSon}}</h3>
    <Son2 @numchange="getNewCount"></Son2>
  </div>
</template>
<script>
import Son2 from './components/Son2.vue'
export default {
  data() {
    return {
      countFromSon: 0
    }
  },
  components: {
    Son2
  },
  methods: {
    getNewCount(val) {
      this.countFromSon = val
    }
  }
}
</script>
​

//子组件
<template>
  <div>
    <h3>Son{{count}}</h3>
    <button @click="add()">+1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1
      this.$emit('numchange', this.count)
    }
  }
}
</script>

结果演示：

四.兄弟组件之间的数据共享

方法：兄弟组件之间数据共享的方案是EventBus

首先确定好数据发送方和数据接收方

在项目中创建EventBus.js，向外共享一个Vue的实例对象作为中间桥梁

发送方中使用自定义事件发送数据（bus.$emit()）

接收方通过 bus.$on() 来接收发送的数据

代码实例：

//兄弟组件1
<template>
  <div>
    <h3>Brother1</h3>
    <button @click="send()">发送数据</button>
  </div>
</template>
<script>
import bus from '../Eventbus'
export default {
  data() {
    return {
      name: 'Louis'
    }
  },
  methods: {
    send() {
      bus.$emit('share', this.name)
    }
  }
}
</script>

//兄弟组件2
<template>
  <div>
    <h3>Brother2</h3>
    <p>{{msgFrom}}</p>
  </div>
</template>
<script>
import bus from '../Eventbus'
export default {
  data() {
    return {
      msgFrom: ''
    }
  },
  created() {
    bus.$on('share', (val) => {
      this.msgFrom = val
    })
  }
}
</script>

结果演示：

五.利用ref实现组件数据的共享

1.什么是ref引用

ref用来辅助开发者在不依赖jQuery的情况下，获取DOM元素或组件的引用。

2.如何使用ref

每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件引用。默认情况下，组件的$refs指向一个空对象。

1.ref引用dom

<template>
  <div>
    <h3 ref="mhy1">App</h3>
    <button @click="send">send</button>
  </div>
</template>
<script>
import Left from "./components/Left.vue";
export default {
  data() {
    return {
      inputVisible: false
    }
  },
  components: {
    Left,
  },
  methods: {
    send() {
      this.$refs.mhy1.style.color = "red";
    },
  },
};
</script>
​

2.ref引用组件实例

代码实例：

//App.vue
<template>
  <div>
    <h3 ref="mhy1">App</h3>
    <button @click="onset">重置Left的count值</button>
    <Left ref="comLeft"></Left>
  </div>
</template>
<script>
import Left from "./components/Left.vue";
export default {
  data() {
    return {
      inputVisible: false
    }
  },
  components: {
    Left,
  },
  methods: {
    onset(){
        this.$refs.comLeft.reset()
    },
  },
};
</script>

//Left组件
<template>
    <div>
        <h3>Left 组件{{count}}</h3>
        <button @click="count++">+1</button>
        <button @click="reset">重置</button>
       
    </div>
</template>
<script>
export default {
    data() {
        return {
            count:0
        }
    },
    methods: {
        reset(){
            this.count=0
        }
    },
}
</script>

\