CODEWITHSUNDEEP
vue.js
edison xue
edison xue

Reputation: 1331

why doesn't my child component work?

Data can be passed down to child components using props. But why doesn't my tag child work?It doesn't print out hello.Here is my code, html:

<div id="app">
   <child message="hello"></child>
</div>

javascript:

new Vue({
  el:'#app'
});

Vue.component('child',{
  props:['message'],
  template:"<span>{{message}}</span>"
})

Upvotes: 0

Views: 56

Answers (2)

craig_h
craig_h

Reputation: 32704

You component needs to be declared before your main Vue instance:

Vue.component('child',{
  props:['message'],
  template:"<span>{{message}}</span>"
})

new Vue({
  el:'#app'
});

Here's the JSFiddle: https://jsfiddle.net/Lxeb7gmo/

Upvotes: 1

boomboxboy
boomboxboy

Reputation: 2434

You must dynamically bind it by adding : in front of message like this

:message="hello"

Upvotes: 0

Related Questions