vuejs如何在子組件內(nèi)輸出參數(shù)中的html

https://cn.vuejs.org/v2/guide...
雙大括號會將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令.

方法一：

基本解決，方法如下，使用了vue的 createElement 渲染函數(shù)，但是需要改造一下。首先父組件data里這樣了：

 {title :'課時簽到', content:function(h){ 
        console.log(this.text);
        return h( 'el-tag',{
            attrs: { size : "mini" },
            on: {
                click: function (event) {
                    alert(event)
                }
            }
        }, '搞定' );
    }},
   

然后子組件，建了一個孫子組件：
```
// 模板部分
 <template slot-scope="scope">
    <node-content :content="item.content" :text="scope.row[item.name]" :row="scope.row"></node-content> // 孫子組件
</template>


// 子組件的compments 加上：

components: {
    NodeContent: {
        props : {
            content:Function,
            text:{},
            row: {}
        },
        render: function render(h) {
            // 如果有content函數(shù)就渲染，沒有就直接輸出文本。
            if(this.content) return this.content.call(h,...arguments); // 就是這里。 
            else return h('span',this.text);
        }
    }
},
```
h就是 createElement() ，createElement語法很D疼，沒有直接寫標簽痛快。
基本解決，遺留問題是，如何把row，傳給父組件的content方法了。

**方法二**
完美解決，參考了elementui里的tree的寫法。
在父組件的data里這么寫,定義一個渲染內(nèi)容
```
{title :'課時簽到e', content:(row)=>{
return (
    <el-button onClick={()=> this.showSigns(row.id) } type="text" size="small" ></el-button>
)

} },

然后在子組件里：
模板：
<template slot-scope="scope">
    <node-content :content="item.content" :row="scope.row"></node-content>
</template>

components里：
 components: {
    NodeContent: {
        props: {
            content:{},
            row:{},
        },
        render: function render(h) {
            return this.content(this.row);
        }
    }
},

<el-table-column v-for="(item,index) in fields" :key="index" :label="item.title" :width="item.width">
    //換成這樣試試
    <template slot-scope="scope" v-html="item.content ? item.content(scope.row) : scope.row[item.name]">
    </template>
</el-table-column>

{name:'address', title :'課程' , content:(row)=>{ 
    return <button on-click={($event) => this.handleClick($event) } >有問題的地方</button>; } }
 },
NodeContent: {
     props: {
         node:'',
     },
     render(h) {
          const node = this.node
          return (
               <span >{ node.item.content ? node.item.content(node.row) : node.row[node.item.name] }</span>
           );
         }
      }
 },

<template slot-scope="scope" >
    <node-content :node="{'item':item,'row':scope.row}" ></node-content>
</template>

我這樣可以，不知道@moonwalkercui 怎么解決的，能不能貼出了，是否可以在 content:(row)=>{ }里面直接寫 render()