Form Input Components Using Custom Events, so at this point we've shown you how to pass data. I guess I actually should talk about this for one second, sync. I'm a little reluctant to talk about sync. So sync, when I first learned view on one view one point, whatever number it was on, sync made things seem really easy, and sync basically did the two-way data binding, so you would say .sync and you'd have your two-way data binding.
And the problem with that and as they put in bold here is makes the code and the child that affects the parents state more consistent and explicit. It basically breaks that one-way data binding. So in version 2.3+, they re-introduced the sync modifier for props, but this time it's only syntactic sugar, the automatic expands into additional V-on, to that V-on syntax we did previously, same thing.
So the following, :food.sync, so this would be on our food.whatever the value.sync=|, which is a little bit complex syntax, I actually think is expanded into :food=| at update :food, value|value. So then inside you would specify this .sign emit update Fu with the new value and it would get that value. So, little confusing, try not to do that... I guess if you find yourself going to this all the time, it's probably not the right thing that you're using because you want to use that emit system like that to do it and not update the parent from your child, the direct value that got passed to it.
All right, so then we move into Form Input Components Using Custom Events. So input V model is syntactic sugar for V bind value, something V on input, something event target value. So you can see it a lot easier to write V model than it is V bind value and input. When use the custom quote in simp simplifies to value, Cohen value something, input value something value. So for component to work with V value, it should... These can be configured in 2.2 the value at input emits. So you can see a currency input V model price, currency input, and then inside of your input field, in order to use that V model, it needs to be a V bind M Cohen value, value and V on input updated value event, target value.
So if you need to do an input field inside of your model and referencing the V model values, course here they have a props of value and then some methods that they're going and running so that you can come in here and type in some values. And it's by typing a or a letter it defaults to N/A, but if I just type in numbers, it's fine. And here's the example of putting everything together now where I might put in some values and it adds those and computes the values together.
Customizing component the model new in 2.2+. So, here's your view component it has the model, the prop, the event, and props checked boolean. And then you say V model Fu value, some value, and the above will be equivalent to :checked food, change value, food value, value some value. So again, pretty straight forward passing in your models. If you specify the model then here inside and then say, "V model checked," you can then specify further and sign.
Non-parent child communication, so this is where it gets complicated, I guess. So, and it's going to be something as when you make complex view application that you're going to need. You have two components, they are completely somewhat related, but not parent child relationship. So you need to set up bus and this bus concept is you instantiate its own bus so bus equals new view, and then in component A's method, so bus.emit ID selected as one, and then on bus.ID selected. So basically, it is a listener and a event sent. So you send the event, you listen for that event. So on ID selected, and then you run.
That's the basic thing, if you need something more than that, they talk about using state management, which is a whole another package to go and integrate, and it can get complex. I will say that, it can get very complex then. So that's it for passing in data. And you can see here, you're just using the emit, but you're passing it as the bus value, which is the new view instance. Which you'll need to make, and you can make, a separate view instance from your main one if you need to reference some of those values across multiple view instances as well. In the next episode, let's go on to content distribution with slots and slots are pretty cool way of passing some data and making it a lot easier than passing it as the model values as we've done previously.