javascript - vuejs动态组件为v-bind抛出错误：is，错误是属性或方法...未在实例上定义但在渲染期间引用

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 [e-mail]:adamchenwei/vue-hoc-playground.git
2. 去src/components/ShowRoom2.vue
3. 纱线安装&&纱线服务
4. 在本地浏览器中观察错误

标签： javascriptvue.jsvuejs2components

Answer 1

是的，模板中的范围与脚本范围不同。如果您需要一些数据，则需要在代码的“组件”定义部分中声明它。对于您的情况，我想“数据”属性应该可以工作

import bbc from './bbc.vue';

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

但是，代码的模板部分也看起来很奇怪。你能解释一下你想做什么吗？