vue-ref-name

easy reference vue component by refName

Introduction

Sometimes we need to get data from other vue components or trigger the methods of another components.vue-ref-name make it easier. Of course there is vuex which is a more powerful state management tool,vue-ref-name is still another choice if you know what you did

Installation

$ npm install vue-ref-name

Example

// just install the vue-ref-nam via Vue.use()

import Vue from 'vue'
import refName from 'vue-ref-name'

vue.use(refName)     // and now your can use this.$refName.componentName to get the component with the name 'componentName'


// for example: we have document tree:

//main.vue
<template>
  <div id="app">
    <ComponentA/>
    <ComponentB/>
  </div>
</template>

<script>
import ComponentA from '.ComponentA.vue'
import ComponentB from '.ComponentB.vue'
export default {
  name: 'app',
  components: { ComponentA, ComponentB },
  data () {
    return {
      mainData: 'component main'
    }
  },
  mounted () {
    console.log(this.$refName.refA.infoA, this.$refName.refB.infoB)    // I am ComponentA, I am ComponentB
  }
}
</script>

// ComponentA.vue
<template>
  <p>{{infoA}}<p>
</template>
<script>
  name: 'refA',
  data () {
    return {
      infoA: 'I am ComponentA'
    }
  },
  mounted () {
    this.$refName.infoB.sayHello()   // will change infoB to "hello"
  }
</script>

// ComponentB.vue
<template>
  <p>{{infoB}}<p>
</template>
<script>
  name: 'refB',
  data () {
    return {
      infoB: 'I am ComponentB'
    }
  },
  methods: {
    sayHello () {
      console.log('will change infoB to "hello"')
      this.infoB = "hello"
    }
  }
</script>

The default config will look for attribute name of each vue component and registe to the refName, then we can get the instance via this.$refName.componentName.But there is a problem, if we re-use the same component,this.$refName.componentName can only get the first mounted one. So, it's recommend to make sure the name as uniquity. Todo that, we can define the refName:

import Vue from 'vue'
import refName from 'vue-ref-name'

vue.use(refName, {refName: 'refName'}) 

//main.vue
<template>
  <div id="app">
    <ComponentA/>
    <ComponentB :newName="'ComponentB1'"/>
    <ComponentB :newName="'ComponentB2'"/>
  </div>
</template>

<script>
import ComponentA from '.ComponentA.vue'
import ComponentB from '.ComponentB.vue'
export default {
  name: 'app',        // this.$refName.app is undefined
  refName: 'myApp',  // now this.$refName.myApp is activity
  components: { ComponentA, ComponentB },
  data () {
    return {
      mainData: 'component main'
    }
  },
  mounted () {
    console.log(this.$refName.myRefA.infoA)    // I am ComponentA
  }
}
</script>

// ComponentA.vue
<template>
  <p>{{infoA}}<p>
</template>
<script>
  name: 'refA',
  refName: 'myRefA',
  data () {
    return {
      infoA: 'I am ComponentA'
    }
  },
  mounted () {
    this.$refName.ComponentB1.sayHello()   // ComponentB1
    this.$refName.ComponentB2.sayHello()  //  ComponentB2
  }
</script>

// ComponentB.vue
<template>
  <p>{{infoB}}<p>
</template>
<script>
  name: 'refB',
  props: ['newName'],

  // do not use `()=>{}`
  refName: function () {
    retutn this.newName
  },
  data () {
    return {
      infoB: 'I am ComponentB'
    }
  },
  methods: {
    sayHello () {
      console.log(this.newName)
    }
  }
</script>

License

MIT