Почему не передаются параметры в компонент vue?

Question

[Andrey]

main.js

import Vue from 'vue'
import store from './store'

new Vue({
  el: '#productList',
	store,
	template: '<span> msg: {{msg}}</span>',
	props: ['msg']
})

index.html
<div id="productList" msg="сообщение"></div>
в результате выводится только msg:
как передать параметр в компонент?
Для сборки использую vue-cli.

UPD: пример https://www.webpackbin.com/bins/-KtvyvDYFoQ2xxX0xAsZ

Comments

[Алексей Ярков]

Тоже интересно О_о
Сделал демку. Добавьте в вопрос: https://www.webpackbin.com/bins/-KtvquAS8bk8tOT8pNzf

[Roman Sokolov]

Алексей Ярков, если передаете строку, то двоеточие не нужно
Замените :msg="test" на msg="test""

[Алексей Ярков]

Roman Sokolov, та уже заметил. Вечер, жара... Весь день сижу пишу и вот под вечер поплыл ))

Answer 1

[Roman Sokolov]

Потому что вы путаете понятия компонента и приложения. В Вашем случае нужно сделать примерно так:
main.js

import Vue from 'vue'
import store from './store'

Vue.component('productList', {
  template: '<span> msg: {{msg}}</span>',
  props: ['msg']
});

var app = new Vue({
  el: '#app',
  store,
})

index.html:

<div id="app">
  <product-list msg="message"></product-list>
</div>

Т.е. Вы один раз создаете экземпляр Vue, а затем добавляете к нему компоненты.

Comments

[Andrey]

Спасибо, так работает, но если использовать render вместо template опять не передаётся, в чём может быть причина?
https://www.webpackbin.com/bins/-KtvyvDYFoQ2xxX0xAsZ

UPD разобрался, может кому пригодится рабочий пример https://www.webpackbin.com/bins/-KtvyvDYFoQ2xxX0xAsZ

Answer 2

[Антон Антон]

Потому что в примере не компонент, а приложение.