child.vue 628 B

12345678910111213141516171819202122232425262728
  1. <template>
  2. <div>
  3. <button @click="$emit('count-change', counte++)">emit value</button>
  4. <div>from parent: {{ passToChild }}</div>
  5. <div>from parent to computed: {{ computedFromProps }}</div>
  6. <div>from parent to data: {{ dataFromProps }}</div>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. name: "Child",
  12. props: {
  13. passToChild: { type: String, default: "" },
  14. },
  15. data() {
  16. return {
  17. counte: 0,
  18. dataFromProps: "data: " + this.passToChild, // non reactive
  19. };
  20. },
  21. computed: {
  22. computedFromProps: function () {
  23. return "computed: " + this.passToChild;
  24. },
  25. },
  26. };
  27. </script>