文件中的代码:
<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>
重现
- git clone git@github.com:adamchenwei/vue-hoc-playground.git
- 转到
src/components/ShowRoom2.vue
- yarn 安装&& yarn 服务
- 在本地浏览器中观察错误
最佳答案
是的,模板中的作用域与脚本作用域不同。如果您需要一些数据,则需要在代码的“组件”定义部分中声明它。对于您的情况,我想“数据”属性应该有效
import bbc from './bbc.vue';
export default {
name: 'ShowRoom2',
data() {
return {
bbc: bbc,
};
},
};
但是,您的代码的模板部分看起来也很奇怪。你能解释一下你想做什么吗?
关于javascript - vuejs动态组件throw error for v-bind :is, error is Property or method ... is not defined on the instance but referenced during render,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52896737/