How can I pass parameters from a div to a single page component in Vue.js?
It is not possible to directly pass parameters from a div since it is an HTML tag and not a custom component. You will need to create your own component that can accept the properties you want to pass.
To achieve this, first define your component and specify which properties it can receive. Then, use your component as demonstrated in the example below. For more information on passing props, refer to this documentation.
Vue.component('your-component', {
props: ['property'],
template: '<h3>{{ property }}</h3>'
})
new Vue({
el: '#app'
})
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f090a1a3f4d514a514e49">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<your-component :property="'Hello props'" />
</div>
Example using Single File Component structure.
Parent component:
<template>
<ChildComponent :property="propValue" />
</template>
<script>
import childComponent from './childComponent.vue';
export default {
components: {
ChildComponent: childComponent
},
data() {
return {
propValue: 'Hello prop'
}
}
}
</script>
Children component:
<template>
<h3>{{ property }}</h3>
</template>
<script>
export default {
props: ['property'] // You can add more properties separeted by commas
}
</script>