Как передать параметры из div в одностраничный компонент в Vue.js? - PullRequest
Новая
       1

Как передать параметры из div в одностраничный компонент в Vue.js?

0 голосов
/ 13 мая 2018

У меня есть такой код на разных страницах: 

<div id="contact-us" class="section md-padding bg-grey">
        <div id="contact"></div>

        <script src="/dist/build.js"></script>
</div>

У меня есть main.js: 

import Vue from 'vue'
import Contact from './Contact.vue'

new Vue({
    el: '#contact',
    render: h => h(Contact)
})

И Contact.vue с шаблоном

Хочузнать, с какого компонента страницы был использован.Поэтому мне нужно передать param от div, как <div id="contact" page="main"></div>.Как я могу это реализовать?

1 Ответ

0 голосов
/ 13 мая 2018

Как передать параметры из div в одностраничный компонент в Vue.js?

Вы не можете передавать параметры из div, поскольку это html-тег и не пользовательский компонент, вы должны определить свой собственный компонент, который принимает свойства, которые вы хотите передать.

Итак, сначала вы должны определить свой компонент и определить, какое свойство разрешено получать, затем использовать свой компонент, взглянуть на приведенный ниже пример, и вы можете найти больше информации о передаче реквизита здесь . 

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>

Пример использования структуры одного файла.

Родительский компонент: 

<template>
  <ChildComponent :property="propValue" />
</template>


<script>
  import childComponent from './childComponent.vue';

  export default {
    components: {
      ChildComponent: childComponent
    },
    data() {
      return {
        propValue: 'Hello prop'
      }
    }
  }

</script>

Детский компонент: 

<template>
  <h3>{{ property }}</h3>
</template>

<script>
export default {
  props: ['property'] // You can add more properties separeted by commas
}
</script>
...