[Vuejs]-How to make a component show different value according to the vue instance it is in?

by

0👍

The app_about does not know what itsMe is.

But you can pass a itsMe as a prop via the props option.

https://v2.vuejs.org/v2/guide/components-props.html

Vue.config.devtools = false;
Vue.config.productionTip = false;

var aboutPageComponent = {
  template: "<div><h1>{{ whatPage }}</h1><p>{{ itsMe }}</p></div>",
  props: ["itsMe"],
  data: function() {
    return {
      whatPage: "This is About Page"

    }
  }
}

var vm = new Vue({
  el: "#app",
  data: {
    itsMe: "This is vm talking"
  },
  components: {
    "app_about": aboutPageComponent
  }
});

var vm2 = new Vue({
  el: "#app2",
  data: {
    itsMe: "This is vm2 talking"
  },
  components: {
    "app_about": aboutPageComponent
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <app_about :its-me="itsMe" />
</div>

<div id="app2">
  <app_about :its-me="itsMe" />
</div>

Leave a comment