I’m exploring the use of vue-cli for my app, and I'm curious if it's possible to utilize a component without relying on App.vue. In this scenario, the component is displayed in the html, but when I click the button labeled "click here", the testFunction within the component is not triggered.
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daacafbf9ae8f4ecf4ebeb">[email protected]</a>" 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')
My Question:
- In this setup, the testFunction in MyComponent isn't being called even though MyComponent is emitting an event, and App.vue is not used.
- Is there a way to register a component without using render:h => h(myComponent) and $mount("#app")?
3.There is an [Vue warn]: Cannot find element: #app error appearing in the console