我如何在没有 App.vue 的情况下渲染组件
[英]How can i have component render without App.vue
问题描述
I'm trying to use vue-cli for app, but i wonder can i use component without using App.vue ?
我正在尝试将 vue-cli 用于应用程序，但我想知道我可以在不使用 App.vue 的情况下使用组件吗？ Here component is shown in html but when i click the button, the testFunction in component is not called but in html the button "click here" is showing这里的组件以 html 显示，但是当我单击按钮时，组件中的 testFunction 未被调用，但在 html 中显示了“单击此处”按钮
index.html索引.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我的组件.vue
<div class="child" @click="$emit('my-event')">
click here
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
}
}
</script>
main.js 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')
My Question:我的问题：
- here testFunction in MyComponent is not called .这里 MyComponent 中的 testFunction 没有被调用。 but i see MyComponent is $emit and i dont use App.vue但我看到 MyComponent 是 $emit 并且我不使用 App.vue
- is there way to register component, without render:h => h(myComponent)?有没有办法注册组件，没有渲染：h => h（myComponent）？ and without $mount("#app")?并且没有 $mount("#app")？
3.there is [Vue warn]: Cannot find element: #app error in console3.出现【Vue警告】：Cannot find element: #app error in console
1 个解决方案
解决方案1
0 2021-08-29 15:57:55
No, that is not possible with the default configuration of vue-cli.不，使用 vue-cli 的默认配置是不可能的。 If you want to import the component globally or only into a specific module then that is entirely possible, but what you are asking isn't possible.如果您想全局导入组件或仅将组件导入特定模块，那么这是完全可能的，但您所要求的是不可能的。 If you'd like to read more about local and global imports then read here .如果您想了解更多有关本地和全局导入的信息，请阅读此处。
There is a potential workaround though.不过，有一个潜在的解决方法。 You could create a second div to mount the application into, and then use the MyComponent component as the Base component for that mounting div .您可以创建第二个 div 以将应用程序挂载到其中，然后将MyComponent组件用作该挂载div的 Base 组件。 However, you will NOT be able to share data directly between the two Vue applications, and this behavior was used to be reserved for Modal insertion;但是，您将无法在两个 Vue 应用程序之间直接共享数据，并且此行为是为 Modal 插入保留的； however, nowadays the correct way to do this would be by via teleporting elements.然而，现在正确的方法是通过传送元素。 You can read more about teleporting elements 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.