鍍金池/ 問答/HTML/ 關(guān)于vue2動態(tài)添加組件,無法被編譯

關(guān)于vue2動態(tài)添加組件,無法被編譯

現(xiàn)在有這么一個需求,就是一段文本中有個別地方需要加特效,比如彈框什么的,但是位置不確定,然后決定數(shù)據(jù)格式這樣寫 {content:'我是文本'+'\ <component v\-bind\:\"testPython \"\:inputValue\=\"\"\>\<\/component\>'+'接著是文本'}
中間的有一個定義好的組件testPython,組件里是這樣寫的

<template>


    <section class="financial-list">
      <section class="collect" >
        <aside>
          <h2 class="title">{{newsDate.title}}</h2>
          <div class="content" v-html="newsDate.content"></div>
          <testPython></testPython>
          <section class="Cleft clearfix">
            <img class="fl" src="../../assets/2.png" style="width:0.24rem;height:0.2rem;">
            <span class="fl">{{newsDate.author_name}}</span>
          </section>
          <section class="Cright">
            <img src="../../assets/1.png" style="width:0.2rem;height:0.2rem;">
            <span>{{newsDate.date | getYMD}}</span>
          </section>
          <div style="clear: both"></div>
        </aside>
        <aside>
          <img :src="newsDate.thumbnail_pic_s" style="border-radius: 0.2rem;" @click="heightValue">
        </aside>
        <div style="clear: both"></div>
      </section>
    </section>

</template>

<script>
  import testPython from "../../components/testPython.vue"
  export default {
    name: 'NewsCell',
    components:{
      testPython
    },
    props: {
      newsDate: Object
    },
    data () {
      return {
      }
    },
    computed: {
    },
    methods: {
      heightValue:function(){
        console.log("shenmegui");
      }
    }
  }
</script>

<style scoped>
  .financial-list {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 0.28rem 0;
    border-bottom: 1px solid #ccc;
  }

  .financial-list .collect {
    width: 92%;
    margin: 0 auto;
  }

  .financial-list .collect aside:nth-of-type(1) {
    width: 63%;
    float: left;
  }

  .financial-list .collect aside:nth-of-type(2) {
    width: 32%;
    float: left;
    margin-left: 0.3rem;
  }

  .financial-list .collect h2 {
    width: 100%;
    /*height: 0.96rem;*/
    font-size:0.6rem;
    color:orange;
    /*line-height: 0.48rem;*/
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
  }

  .financial-list .collect aside:nth-of-type(2) img {
    width: 100%;
    height: 100%;
  }

  .financial-list .collect aside .Cleft {
    width: 45%;
    float: left;
    margin-top: 0.66rem;
  }

  .financial-list .collect aside .Cleft span{
    display: block;
    width: 1.4rem;
    margin-left: 0.05rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
  }

  .financial-list .collect aside .Cright {
    width: 55%;
    float: right;
    margin-top: 0.66rem;
  }
  .financial-list .collect aside .Cright span{
    display: inline-block;
    margin: 0.04rem 0 0 0.05rem;
  }
  .financial-list .collect aside span {
    font-size: 0.2rem;
    color: #999999;
  }

  .financial-list .collect aside .Cleft img,
  .financial-list .collect aside .Cright img {
    width: 0.18rem;
    height: 0.24rem;
    margin-top: 0.09rem;
  }

  .content{
    font-size:0.55rem;
  }
</style>

父組件請求后props給子組件,子組件拿到數(shù)據(jù)后通過v-html插入template里,然后通過import引入定義好的組件,結(jié)果是子組件不渲染,圖片描述

大神們看看是思路問題,還是那塊有問題,用的是vue2,查資料vue1 的Vue.compile( template )方法好像不好用了

回答
編輯回答
黑與白

1.官網(wǎng)給的demo里是v-bind:is 的寫法

clipboard.png

2.這里的這個組件根本沒有渲染,vue在分析template的時候會將template里的html轉(zhuǎn)化成render寫法來生成html,你這里依然是component,vue解析器在執(zhí)行render('component',...)的時候并沒有識別到這是一個動態(tài)組件,可能是你沒加is的原因。
3.這種時候,如果你熟悉react的jsx的話,用jsx會比較好一些,vue官方提供了這么一個插件:babel-plugin-transform-vue-jsx

2018年9月17日 19:53
編輯回答
傲寒
2017年7月7日 06:06
編輯回答
萌二代

你的邏輯沒細看,但是現(xiàn)在不支持動態(tài)組件的編譯是真的,可以嘗試使用 JSX 來寫,把渲染邏輯自己實現(xiàn)

2017年5月27日 06:04
編輯回答
舊酒館

如果使用component 當做動態(tài)組件掛載點,那么題主的問題 是不是因為 Component標簽缺少is屬性導致的呢?使用Component動態(tài)組件需要is屬性來確定Vue到底使用哪個組件來渲染這個節(jié)點。

2017年11月2日 06:32
編輯回答
帥到炸

紅圈里代碼的什么鬼?。?/p>

2017年6月2日 23:35