JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<div id="app">

  <modal ref="modal" header="one" body="two">
    <div slot="header">Slot header title</div>
  </modal>

  <button type="button" @click="update">Click Me</button>

</div>

JavaScript

Vue.component('modal', {
  template: `<div>
  <h4><slot name="header">{{ header }}</slot></h4>
  <p>{{ body }}</h4>
  </div>`,
  props: ['header','body'],
  data() {
    return {
      header: 'Header data',
      body: 'Body data'
    }
  }
});

const App = new Vue({
  el: '#app',
  methods: {
    update() {
      console.log(this.$refs.modal.header);
      this.$refs.modal.header = 'header test me';
      this.$refs.modal.body = 'body test me';
    }
  }
});