title: How to pass props using slots from parent to child -vuejs
body: <p>I have a parent component and a child component.<br><br>
  The parent component's template uses a slot so that one or more child components can be contained inside the parent.<br><br>
  The child component contains a prop called 'signal'.<br><br>
  I would like to be able to change data called 'parentVal' in the parent component so that the children's signal prop is updated with the parent's value.</p>
  
  <p>This seems like it should be something simple, but I cannot figure out how to do this using slots: 
  Here is a running example below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const MyParent = Vue.component('my-parent', {
    template: `&lt;div&gt;
                 &lt;h3&gt;Parent's Children:&lt;/h3&gt;
                 &lt;slot :signal="parentVal"&gt;&lt;/slot&gt;
               &lt;/div&gt;`,
  
    data: function() {
      return {
        parentVal: 'value of parent'
      }
    }
  });
  
  const MyChild = Vue.component('my-child', {
    template: '&lt;h3&gt;Showing child {{signal}}&lt;/h3&gt;',
    props: ['signal']
  });
  
  new Vue({
    el: '#app',
    components: {
      MyParent,
      MyChild
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;my-parent&gt;
      &lt;my-child&gt;&lt;/my-child&gt;
      &lt;my-child&gt;&lt;/my-child&gt;
    &lt;/my-parent&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>