Vue中通过 ref 实现组件通信

295 阅读1分钟
// 子组件
<template>
  <div>
    {{ number }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0
    }
  },
  methods: {
    setNumber(val) {
      this.number = val
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <Child ref="assembly" />
  </div>
</template>

import Child from './child'
<script>
export default {
    components: {
        Child
    },
    mounted() {
        // 通过ref可以获取到子组件实例,访问子组件上的数据和方法
        this.$refs.assembly.setNumber(10)
    }
}
</script>