3 ms·

Hard to represent certain ideas in a cheat sheet. One thing I saw was showing how on a button click you can pass an object as an argument. I’ve personally tren

Hard to represent certain ideas in a cheat sheet. One thing I saw was showing how on a button click you can pass an object as an argument. I’ve personally trended away from that pattern and towards always avoiding method calls with arguments in template code. This means creating a sub component which takes in the object in question. One ends up with a lot more components, but code is really well isolated and it’s incredibly easy to reason about what’s happening.

hnrodey 8y ago
I built my first site in Vue over the past few weeks and found myself with the same conclusion. But I had to build it the "wrong" way first before I realized how much easier the code is to write using the sub-components.
mimischi 8y ago
I'm having a hard time wrapping my head around the problem. Could you elaborate with some examples of how it looks before and afterwards? Wondering whether I'm doing this stuff for my own projects.
- wjossey 8y ago
  I put all the code in a single gist to make it easier to reason. This example (b/c it's basic) looks like more-code that's just generally unnecessary. In practice though, I've found those-sub components, even when it's just a button, tend to benefit from splitting out. You end up doing some styling to them, having them inherit from a parent button component, etc. https://gist.github.com/wjossey/0d7ca1a3c2040e1c376a914941b83ffb https://gist.github.com/wjossey/0d7ca1a3c2040e1c376a914941b8...
  - mimischi 8y ago
    Thanks, I haven't realized I could pass a method to a child, which acts on the context of the parent (that's what's happening here, right?).
    - wjossey 8y ago
      What I showed you is just a callback chain. Vue recommends all changes flow UP. So, you can imagine a button is a leaf node that when pressed calls a function passed to it. That function belongs to the parent component in this case. If you ever did traditiona JavaScript programming earlier in this century, you’ll be familiar with this pattern which is referred to as “callback hell” by some. If you ever go to use a third party library like Vuetify, the components you use in essence follow the same pattern.

hnrodey 8y ago

I built my first site in Vue over the past few weeks and found myself with the same conclusion. But I had to build it the "wrong" way first before I realized how much easier the code is to write using the sub-components.

mimischi 8y ago

I'm having a hard time wrapping my head around the problem. Could you elaborate with some examples of how it looks before and afterwards? Wondering whether I'm doing this stuff for my own projects.

wjossey 8y ago
I put all the code in a single gist to make it easier to reason. This example (b/c it's basic) looks like more-code that's just generally unnecessary. In practice though, I've found those-sub components, even when it's just a button, tend to benefit from splitting out. You end up doing some styling to them, having them inherit from a parent button component, etc. https://gist.github.com/wjossey/0d7ca1a3c2040e1c376a914941b83ffb https://gist.github.com/wjossey/0d7ca1a3c2040e1c376a914941b8...
- mimischi 8y ago
  Thanks, I haven't realized I could pass a method to a child, which acts on the context of the parent (that's what's happening here, right?).
  - wjossey 8y ago
    What I showed you is just a callback chain. Vue recommends all changes flow UP. So, you can imagine a button is a leaf node that when pressed calls a function passed to it. That function belongs to the parent component in this case. If you ever did traditiona JavaScript programming earlier in this century, you’ll be familiar with this pattern which is referred to as “callback hell” by some. If you ever go to use a third party library like Vuetify, the components you use in essence follow the same pattern.