javascript - 学习vue.js组件使用props属性报错，按照官方文档写，但报错

问题描述

问 题

代码如下

 <div id="box6">
      <my-component2 :showInfor="hello"></my-component2>
      <my-component2 :showInfor="hi"></my-component2>
 </div>
 
 <script type="text/javascript">
     Vue.component('my-component2',{
          props: ['showInfor'],
          template: "<div><h4>{{showInfor}}</h4></div>",
          computed: {
            showInforRes: function(){
              return this.showInfor+" world!"
            }
          }
        })
        var com2 = new Vue({
          el: '#box6'
        })
</script>

报错如下

解决方案

<div id="box6">
    <my-component2 show-infor="hello"></my-component2>
    <my-component2 show-infor="hi"></my-component2>
</div>

<script type="text/javascript">
    Vue.component('my-component2',{
        props: ['showInfor'],
        template: "<div><h4>{{showInfor}}</h4></div>",
        computed: {
            showInforRes: function(){
                return this.showInfor+" world!"
            }
        }
    })
    var com2 = new Vue({
        el: '#box6'
    })
</script>

//说明：属性前去掉冒号，冒号表面是动态属性。同时改成-链接形式，不要驼峰形式，这是推荐标准写法。

这篇关于javascript - 学习vue.js组件使用props属性报错，按照官方文档写，但报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！