跟着技术胖学Vue2.0—第二季第七课：Component组件props属性设置

课程回顾

课程主要内容

1、props的一般写法。

2、属性名带-的写法。

3、属性绑定data的写法。

课程展开

1、props的一般写法

在上节课的基础上，我们对局部组件实现一个props属性。先将上节课的代码放上来：

<div id="app">
     <panda></panda>
</div>

<script>
        var app = new Vue({
            el:'#app',
            components:{
                'panda':{
                    template:`<div style='color:red'></div>`
                }
            }
        })
</script>

上面代码中的panda组件运行出来在前端页面上并不会有具体的效果展示，现在要实现的是：页面显示Panda is from China，其中的China值来自于here属性，当我们改变here的赋值时，China也将变为对应的值。

具体的实现如下：

<div id="app">
        <panda here="China"></panda>
</div>

<script>
        var app = new Vue({
            el:'#app'
            components:{
                'panda':{
                    template:`<div style='color:red'>Panda is from {{here}}</div>`,
                    props:['here']
                }
            }
        })
</script>

上面的代码中用到了props对here属性进行注册，这样使用插值的方式将here插入到对应的位置。当我们要改变here值时，直接在html标签中改变对应的属性值即可。

效果：
    

 2、属性名带-的写法

前面我们的属性名是here，如果此时取名为from-here，再原封不动地用from-here替换here就不好使了，因为在Vue中不支持这样的命名写法，而是需要将from-here改写为小驼峰命名，fromHere就是对应的正确写法。在html中保留from-here，在script中都要替换为fromHere哦。

3、属性绑定data的写法

前面的改变属性值的方式是直接在html标签中修改，一般情况下我们需要与后台交互，因此最好由后台赋值，下面就介绍一下绑定后台data的写法。

其实改动非常小，使用之前学过的v-bind绑定here属性，然后属性值写为data中声明的变量即可。代码如下：

<div id="app">
        <panda :here="message"></panda>
</div>

<script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'China'
            },
            components:{
                'panda':{
                    template:`<div style='color:red'>Panda is from {{here}}</div>`,
                    props:['here']
                }
            }
        })
</script>

上面的代码绑定here时使用了简便写法，:=v-bind:，顺便复习一下啦。 

效果：

---

以上就是第七课的全部内容啦，下次再见！