大佬教程收集整理的这篇文章主要介绍了vue3-runtime-template：[Vue 警告]：在渲染期间访问了属性“模型”，但未在实例上定义，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我一直在尝试在我的 vue3 示例项目中使用 vue3-runtime-template 来动态编译自定义 vue 模板。我也按照官方文档提供的这个库的配置说明：
// vue.config.Js
module.exports = {
configureWebpack: {
resolve: {
alias: {
vue$: "vue/dist/vue.esm-bundler.Js",// ...
},},};
这应该允许在运行时编译。 当我使用 Options API（使用数据：() => ({attributes})）时，一切都很好，我的模型属性将被运行时模板取消：
<template>
<div>
<v-runtime-template :template="template"></v-runtime-template>
</div>
</template>
<script>
import VRuntimeTemplate from "vue3-runtime-template";
export default {
components: {
VRuntimeTemplate,data: () => ({
model: "Audi RS7",template: `
<h3>hey,I am a car (model {{model}})</h3>
`
})
};
</script>
但是，当我切换到新的 Composition API 时，模板不再识别模型属性并抛出警告： Warning
这是基于我的示例的 options API 等价的组合 API，这会导致错误：
<template>
<div>
<v-runtime-template :template="template"></v-runtime-template>
</div>
</template>
<script>
import VRuntimeTemplate from "vue3-runtime-template";
import { ref } from "vue";
export default {
components: {
VRuntimeTemplate,setup() {
const model = ref("Audi RS7");
const template = ref(`
<h3>hey,I am a car (model {{model}})</h3>
`);
return {
model,template,};
},};
</script>
setup() 和 data() 之间似乎有些区别，坦率地说，我不太明白，为什么 model 对 vue3-runtime-template 保持不可见，如果使用设置（）。
我真的很感谢一个好的解释。
在查看库源代码后，我很清楚为什么该插件不能与组合 api 一起使用。原因是你过去在 data()、computed、methods 等中定义的属性都可以作为 this.parent 的属性在它们各自的名称下访问，现在所有这些东西都被压入了 setup()，它们可用作直接字段（即，如果您有一个计算值 someCompValue，它不再在 this.parent.computed['someCompValue'] 下，而是在 this.parent['someCompValue'] 下） .
这就是为什么除了手动调整这个插件以适应组合 API 的结构之外别无他法。
编辑：如果您尝试通过 this.parent 对象键运行，您可能会收到类似“避免依赖于枚举组件实例上的键的应用逻辑。键将在生产模式下为空以避免性能开销。”在我的生产版本中实际上是这种情况并且 this.parent 的每个属性都消失了，这显然导致插件出现故障。我仍在搜索它，但当父组件使用组合 API 构建时，该插件似乎在访问父组件的数据方面遇到了一些困难。
进一步编辑 我对之前编辑问题的解决方案只是将父元素现在缺失的属性（如数据、计算和方法）作为额外的道具传递给 vue3-runtime-template，并将它们与插件的属性结合起来可以自己提取，比如 props、components 等
以上是大佬教程为你收集整理的vue3-runtime-template：[Vue 警告]：在渲染期间访问了属性“模型”，但未在实例上定义全部内容，希望文章能够帮你解决vue3-runtime-template：[Vue 警告]：在渲染期间访问了属性“模型”，但未在实例上定义所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。