How to send a data parameter to a component?

Question

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:

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

tony19 · Accepted Answer · 2022-07-15 22:45:59Z

1

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

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

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

demo

edited Jul 15, 2022 at 22:45

answered Dec 12, 2020 at 18:30

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to send a data parameter to a component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related