CODEWITHSUNDEEP
vue.jsvuejs3
jlo
jlo

Reputation: 2259

How to send a data parameter to a component?

I have one component that takes a string as input. In one of its instances, I'm sending it a string literal; and to the other one, I want to send a data parameter. How can I achieve this?

App.vue

<template>
  <div>
    <HelloWorld msg="What's up, man?" />
    <HelloWorld msg="{{message}}" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      message: "Nothing much, doing OK"
    }
  },
  components: {
    HelloWorld
  }
};
</script>

HelloWorld

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

This is what I get as a result: enter image description here

Any ideas? Where am I going wrong? I have looked at similar questions, but I couldn't find anything concrete.

Upvotes: 0

Views: 152

Answers (1)

tony19
tony19

Reputation: 138246

The v-bind directive is used to bind data properties:

<HelloWorld v-bind:msg="message" />

<!-- OR shorthand -->
<HelloWorld :msg="message" />

demo

Upvotes: 1

Related Questions