CODEWITHSUNDEEP
vue.js
Rameen
Rameen

Reputation: 11

How to send outer variable to a vue component

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?

Upvotes: 1

Views: 53

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could pass it as prop like :

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

and send-sms-btn component should define that prop :

export default{
  name:'send-sms-btn',
  props:['number']

Upvotes: 0

Amaarockz
Amaarockz

Reputation: 4684

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']

Upvotes: 1

Related Questions