vue.js - How to send outer variable to a vue component

Question

I have a Vue Component called send-sms-btn which is next to an input tag like below :

<input v-model="number" placeholder="enter your phone number..." >
<send-sms-btn></send-sms-btn>

As you can see when user enters the phone number in the input it saves in to a data called number, but how can I pass this data to my send-sms-btn component?

question from:https://stackoverflow.com/questions/66061960/how-to-send-outer-variable-to-a-vue-component

Answer 1

you can use props in this case

<send-sms-btn :enteredNumber="number"></send-sms-btn>

and inside your send-sms component you can receieve it in the props section like

props: ['enteredNumber']