vue.js - vue父子组件渲染数据不出来

问题描述

问 题

我定义了一个父子组件如下

//定义一个知识列表组件
    var articleList=Vue.extend({   //定义一个子组件，组件内的li标签v-for出来
          template:'<li>'
                        +'<a class="articleUl_a" :href="item.articleaddress" target="_blank">'
                            +'<div class="content_box">'
                                +'<div class="info_box">'
                                    +'<div class="color_9">'
                                        +'<ul class="metaUl">'
                                            +'<li>{{item.author}}</li>'
                                            +'<li>{{item.settime}}</li>'
                                            +'<li class="js-tag"><li>'
                                        +'</ul>'
                                    +'</div>'
                                    +'<div class="marginTop10 overflowEllipise">'
                                        +'<a :href="item.articleaddress" class="article_title color_3 fontSize16">{{item.articletitle}}</a>'
                                    +'</div>'
                                    +'<div class="marginTop5">'
                                        +'<a class="color_9 js-like">'
                                            +'<i class="fa fa-heart" aria-hidden="true"></i>'
                                            +'<label>{{item.likenum}}</label>'
                                        +'</a>'
                                    +'</div>'
                                +'</div>'
                                +'<div class="thumb" :style="{background-image:item.image,background-size: cover}"></div>'
                            +'</div>'
                        +'</a>'
                    +'</li>',
          props:['item']
    });
    Vue.component('project',{  //定义父组件，在父组件内部注册子组件
      template:'<ul class="articleUl"><article-list v-for="item in items" :item="item"></article-list></ul>',
      data:function(){
          return {
              items:this.articleArray
          }
      },
      components:{
        'article-list':articleList
      },
      props:{
        articleArray : Array
      }
    });
    new Vue({
        el: '#articleContent',
        data:{
            articleArray
        }
    });
    var articleArray=[
        {
            articleaddress:"",
            author:"赵某某",
            settime:"2017年06月23日",
            articletitle:"关于微信推送页设计的思考",
            likenum:"10",
            image:"../images/jscss.jpg"
        }
    ];

html代码如下所示

<article id="articleContent">
            <project :article-array='articleArray'></project>
</article>

为什么子组件没有被渲染出来呢？在浏览器中跟踪代码时，发现父组件被渲染出来了，缺少子组件，vue也不报错

解决方案

https://jsfiddle.net/KingMari...

把

var articleArray=[
    {
        articleaddress:"",
        author:"赵某某",
        settime:"2017年06月23日",
        articletitle:"关于微信推送页设计的思考",
        likenum:"10",
        image:"../images/jscss.jpg"
    }
]

放到前面去

另外，最上面的模板中，<li class="js-tag"><li> 少了反斜杠，<div class="thumb" :style="{background-image:item.image,background-size:cover}">少了若干单引号。

强烈建议使用 .vue 单文件组件，欢迎参加我的关于 Vue 的讲座以及极客学院的 Vue 视频课程。

这篇关于vue.js - vue父子组件渲染数据不出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！