如何在没有 App.vue 的情况下进行组件渲染
Posted
技术标签:
【中文标题】如何在没有 App.vue 的情况下进行组件渲染【英文标题】：How can i have component render without App.vue 【发布时间】：2021-10-28 14:18:47 【问题描述】：我正在尝试将 vue-cli 用于应用程序，但我想知道我可以在不使用 App.vue 的情况下使用组件吗？ 这里的组件显示在 html 中，但是当我单击按钮时，组件中的 testFunction 没有被调用，但是在 html 中显示了“单击此处”按钮
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<h1>hi</h1>
<div id="app">
<MyComponent @my-event="testFunction"></MyComponent>
</div>
<!-- built files will be auto injected -->
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11" defer></script>
<script src="main.js" defer></script>
</html>
MyComponent.vue
<div class="child" @click="$emit('my-event')">
click here
</div>
</template>
<script>
export default
name: 'MyComponent',
props:
</script>
main.js
import Vue from 'vue/dist/vue.js'
import MyComponent from './components/MyComponent'
Vue.config.productionTip = false
Vue.component('MyComponent',MyComponent);
new Vue(
el: '#app',
beforeCreate()
console.log('Vue instance beforeCreate!');
,
created()
console.log('Vue instance created!');
,
mounted()
fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
.then(json => this.todos=json);
,
components:
MyComponent
,
data:
todos:null,
data:null
,
methods:
testFunction:function()
console.log("clicked");
,
render:h => h(MyComponent),
).$mount('#app')
我的问题：
-
此处未调用 MyComponent 中的 testFunction。但我看到 MyComponent 是 $emit
我不使用 App.vue
有没有办法注册组件，无需渲染：h => h(myComponent)？并且没有 $mount("#app")？
3.出现【Vue warn】：Cannot find element: #app error in console
【问题讨论】：
有没有办法注册组件，没有 - 你希望它如何被使用？这听起来像 XY 问题。如果您有具体的问题需要解决，请描述它。 【参考方案1】：不，这在 vue-cli 的默认配置下是不可能的。如果您想将组件全局导入或仅导入特定模块，那么这是完全可能的，但您所要求的是不可能的。如果您想了解更多关于本地和全局导入的信息，请阅读here。
虽然有一个潜在的解决方法。您可以创建第二个 div 以将应用程序挂载到其中，然后使用MyComponent 组件作为该挂载div 的基础组件。但是，您将无法在两个 Vue 应用程序之间直接共享数据，并且这种行为是为 Modal 插入保留的；然而，现在正确的方法是通过传送元素。您可以阅读有关传送元素的更多信息here
// main.js
import createApp from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';
createApp(App).mount('#app');
createApp(MyComponent).mount('#app2');<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without javascript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<div id="app2"></div>
<!-- built files will be auto injected -->
</body>
</html>【讨论】：
以上是关于如何在没有 App.vue 的情况下进行组件渲染的主要内容，如果未能解决你的问题，请参考以下文章