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

最新推荐文章于 2026-06-15 12:45:10 发布

原创

最新推荐文章于 2026-06-15 12:45:10 发布 · 2.3k 阅读

标签

#前端 #vue #html

收录于

课程回顾

课程主要内容

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 {