title: VueJs 2: How to display prop in another component?
body: <p>I have a simple question, but cannot find how to solve.</p>
  <p>There are 2 Vue 2 Components. In Component 1, two props are passed, which therefore are used in Component 2.</p>
  <pre><code>// Component 1
  Vue.component('component1', {
      props: {
          titleTest: {
              type: String,
              required: true
          },
          textTest: {
              type: String,
              required: true
          }
      },
      template: `
      &lt;div&gt;
          &lt;div :title=&quot;titleTest&quot;&gt;{{ titleTest }}&lt;/div&gt;
          &lt;div :data-test=&quot;textTest&quot;&gt;{{ textTest }}&lt;/div&gt;
      &lt;/div&gt;
      `,
      created() {
          console.log('Created1');
          this.$root.$refs.component1 = this;
      },
      methods: {
          foo: function() {
              alert('this is component1.foo');
          }
      }
  });
  
  // Component 2
  Vue.component('component2', {
      template: `
      &lt;div&gt;
          &lt;div&gt;Some text&lt;/div&gt;
          &lt;ul&gt;
              &lt;li&gt;List Item1&lt;/li&gt;
              &lt;li&gt;List Item2&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div&gt;
              &lt;button id='test' type=&quot;submit&quot; @click=&quot;bar&quot;&gt;Text&lt;/button&gt;
              &lt;component1 ref=&quot;component1&quot; :title=&quot;test1&quot; :data-test=&quot;test2&quot;&gt;&lt;/component1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      `,
      data: function() {
          return {
              test1: 'testText1',
              test2: 'testText2'
          };
      },
      methods: {
          bar: function() {
              this.$root.$refs.component1.foo();
          }
      },
      created: function() {
          console.log('Created2');
      }
  });
  
  new Vue({
      el: '#plotlyExample',
  });
  
  </code></pre>
  <p>My idea, when I use Component 1 in Component 2 HTML template and bind data variables, they should be displayed. However, Vue sets only &quot;title&quot; and &quot;data-test&quot; but {{ titleTest }}, {{ textTest }} are not displayed. Additionally Vue sets props in one div, instead of two separate.</p>
  <p><a href="https://i.stack.imgur.com/8wtrU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8wtrU.png" alt="Screenshot" /></a></p>
  <p>My ideal result is:</p>
  <p><a href="https://i.stack.imgur.com/NNdBV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NNdBV.png" alt="enter image description here" /></a></p>