vuejs dynamic component throw error for v-bind:is, error is Property or method … is not defined on the instance but referenced during render

Question

Code in the file:

<template>
  <component v-bind:is="bbc"></component>
</template>

<script>

import bbc from './bbc.vue';

  export default {
    name: 'ShowRoom2',
  };
</script>

./bbc.vue

<script>
  export default {
    name: 'bbc',
    props: {
      msg: String,
    },
    mounted() {
      console.log('bbc is mounted');
    },
    render() {
      if (this.func) this.func();
      return (
        <div class="bbcMyClass">
          <h1>bbc: <span>Pal</span> <span>{this.msg}</span></h1>
        </div>
      )
    }
  };
</script>

To reproduce

1. git clone git@github.com:adamchenwei/vue-hoc-playground.git
2. go to src/components/ShowRoom2.vue
3. yarn install && yarn serve
4. observe error in the local browser

Answer 1

Yes, the scope in the template is not the same as the script scope. If you need some data, you need to declare it inside the 'component' definition part of the code. For your case, I guess the 'data' property should work

import bbc from './bbc.vue';

export default {
  name: 'ShowRoom2',
  data() {
    return {
      bbc: bbc,
    };
  },
};

However, the template part of your code also looks weird. Could you explain what you're trying to do ?