[Vuejs]-How to pass params from div to single page component in Vue.js?

How to pass params from div to single page component in Vue.js?

You can’t pass params from a div since it’s a html tag and a not custom component, you should define your own component that accepts the properties you want to pass.

So first you should define your component and define the property is allow to receive, then you use your component, take a look to the below example, and you may find more information about passing props here.

Vue.component('your-component', {
  props: ['property'],
  template: '<h3>{{ property }}</h3>'
})

new Vue({
  el: '#app'
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/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>