I have a page property named headline which I want to display in a custom component. I also have a textfield property in the component's cq:dialog.
How do I have them always have the same value so that if I change value at one place, its also changed at the other. Is there a form of global variable I can create?
I possibly want to avoid using sling model and work with slightly/ clientlibs.
I'm not sure this is a good idea to implement in this way. You're trying to have a component's property linked to a page property in such a way that the value is changed in the page property when the component is edited. It's going to cause a nightmare if it gets out of sync as you won't be able to tell which value it ought to have.
However, there's ways to do it using clientlibs. What you would need to do is create code in the authoring clientlib and add a callback in each of the two dialogs, the page dialog and the component dialog.
The callback in the component dialog would need to, when saving, set the page property to match the updated value; and the callback in the page properties dialog would need to go through the page's children, find any components of that type, and set their property to match the one just set in the page properties.