JSFiddle - React, Tailwind, and code Playground

by jswenjie

HTML

<div id="app">
    <div>
      <validate v-slot="{ error }">
        in scope {{ error }}
        {{ sendToParent(error) }}
      </validate>
    </div>
    <div>in parent {{ error }}</div>
  </div>

Vue

Vue.component("validate", {
  data() {
    return {
      error: false
    };
  },
  mounted: function() {
    setInterval(() => (this.error = Date.now()), 1000);
  },
  template: '<div><slot :error="error" /></div>'
});

new Vue({
  el: "#app",
  data() {
    return {
      error: ""
    };
  },
  methods: {
    sendToParent(error) {
      this.error = error;
    }
  }
});