Passing a vue component to a child component

Question

I am trying to create a Vue component that will take the component as a parameter for displaying data, but I find it hard to figure out how to make it work. If I register the display component globally (using Vue.component ()), it works, but if I register it locally, I get the following error:

[Vue warn]: Unknown custom element: <my-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Can someone tell me how to make this work with local registration?

The main component:

<template>
    <div>
        <my-list :items="items" :renderer="renderer"></my-list>
    </div>
</template>
<script>
import MyList from './my-list'
export default {
    components: {
        'my-list': MyList,
        'my-link': {
            props: { data: Object },
            template: '<span>{{ data.Name }}</span>'
        }
    },
    data() {
        return {
            items: [
                { id: 1, Name: 'One' },
                { id: 2, Name: 'Two' }
            ],
            renderer: 'my-link'
        }
    }
}
</script>

MyList Component:

<template>
    <div>
        <div v-for="item in items" :key="item.id">
            <div :is="renderer" :data="item"></div>
        </div>
    </div>
</template>
<script>
export default {
    props: { 
        items: Array,
        renderer: String
    }
}
</script>

Answer 1

, my-link , . my-link , MyList .

my-link components MyList .

---

my-link , . my-list.

---

, my-link , Vue.component , (, src/main.js, vue-cli ):

Vue.component('my-link', {
  props: { data: Object },
  template: '<span>{{ data.Name }}</span>'
});

new Vue({
  el: '#app',
  ...
});

---

, , , @BertEvans.