vue props传值失败

Question

<div class="am-u-sm-4" id= "app">
    <panel-list ></panel-list>
</div>

Vue.component('panel-list', {
            props: ['type'],
            template: '<div :type="par" class="am-panel" :class="[type]">A custom component!</div>',
            
        })
        var app = new Vue({
            el: '#app',
            data: {
                par:'am-panel-secondary',
            },  
            
        })

报错 par is not defined

但是

<div class="am-u-sm-4" id= "app">
    <panel-list :type="par"></panel-list> //把：type移到这
</div>
Vue.component('panel-list', {
            props: ['type'],
            template: '<div  class="am-panel" :class="[type]">A custom component!</div>',
            
        })
        var app = new Vue({
            el: '#app',
            data: {
                par:'am-panel-secondary',
            },  
            
        })

却是对的。怎么解决呢。

Answer 1

prop就是父组件传给子组件的。。。
你这是子组件自己传给div而且子组件data没有par这个数据

Answer 2

props: ['type']这是接收panel-list绑定的东西，所以你panel-list上必须要有:type,你想父组件传值给子组件就是要把传的东西赋值给绑在子组件上的自定义属性，然后子组件用props这个属性拿到父组件传递的值

Answer 3

prop对应的属性还是要放在父组件看得到的地方。放在子组件的template里面 只能是子组件的属性了。

Answer 4

prop是显示父传给子的属性，第一个实例panel-list中都没传type当然报错了。

Answer 5

在子组件用props接收数据就行了，：type=par只能在父组件调用子组件时使用，且写在子组件上

Answer 6

:type="par" 这个应该写在父组件上，向子组件传数据。
type是在子组件中的接收变量，par是父组件要传的数据