Vue 3 - refs

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <my-child :list="list" v-slot="{ item }">
    <span ref="span">{{ item }}!!</span>
  </my-child>
  <button @click="list[0] += '#'">
    Update
  </button>
</div>

JavaScript

const MyChild = {
  template: `
    <ul>
      <li v-for="item in list">
        <slot :item="item" />
      </li>
    </ul>
  `,

  props: ['list'],
  
  updated () {
    console.log('child updated')
  }
}

const app = Vue.createApp({
  components: {
    MyChild
  },

  data () {
    return {
      list: ['Red', 'Green', 'Blue']
    }
  },

  mounted () {
    this.logRefs()
  },

  updated () {
    console.log('parent update')
    this.logRefs()
  },

  methods: {
    logRefs () {
      //console.log('$refs.inputEl', type(this.$refs.inputEl))
			console.log('span', type(this.$refs.span))
    }
  }
})

app.mount('#app')

function type (v) {
  return ({}).toString.call(v).slice(8, -1)
}