v-bind：is的vuejs動態組件拋出錯誤，錯誤是Property或method…未在實例上定義，但在渲染期間被引用

Question

文件中的代碼：

<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>

重現

1. git clone git@github.com：adamchenwei / vue-hoc-playground.git
2. 轉到src/components/ShowRoom2.vue
3. 紗線安裝&&紗線服務
4. 在本地瀏覽器中觀察錯誤

Answer 1

是的，模板中的作用域與腳本作用域不同。 如果需要一些數據，則需要在代碼的“組件”定義部分內聲明它們。 對於您的情況，我猜想'data'屬性應該起作用

import bbc from './bbc.vue';

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

但是，代碼的模板部分也看起來很奇怪。 您能解釋一下您要做什么嗎？