vue.extend 为什么会渲染失败？

  • Z时代
  • 2024-02-25
  • 分类：IT

想用vue.extend创建一个组件挂载到指定dom下，但是好像渲染不出来,是不是我使用上有什么错误呢？：
testDiv原始结构：

<div id="testDiv">10000</div>

vue.extend逻辑：

let tempCom = Vue.extend({
  template: '<div>123123</div>'
})
setTimeout(() => {
  let t = new tempCom().$mount()
  document.getElementById('testDiv').appendChild(t.$el)
}, 3000);

逻辑执行后：
vue.extend 为什么会渲染失败？

回答：

我不是很认同1楼和2楼的，并且我认为extend是可以使用的。
只是目前看起来是有问题的，请问控制台有警告嘛。

如果存在的话，可能是vue没编译模块导致template的无法支持加载。

应该有这句。

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

可以尝试直接使用render进行组件渲染。

  const E = Vue.extend({
    render: (h) => h(HelloWorldVue),
  });
  const e = new E({
    // el: "#t"
  });
  const t = e.$mount();
  // e.$mount().$el;
  console.log(t.$el);
  document.documentElement.appendChild(t.$el)

或者如果有警告就开启 vue.config.js 的 runtimeCompiler 参数

回答：

你需要 new Vue 而不是 Vue.extend

回答：

同1楼，你需要去 new 一个 vue 实例出来，然后再在实例内部去继承。

但是我看你想要做的其实并不是继承一个已有的Vue组件，所以其实你是需求是新建一个Vue实例去渲染在目标Dom内部。

以上是 vue.extend 为什么会渲染失败？ 的全部内容， 来源链接： utcz.com/p/932825.html

回到顶部