vue.js 传入模板到子组件{{}}无法解析

Question

子组件:

var Conversation = {
    data: function () {
        return {
        }
    },
    props: {
        content: String,
        btn: Array,
        isActive: Boolean,
        freeData:Object,
    },
    template: '<div class="conversation" :class="{ active: isActive }" v-html="content">'
        +'<div v-for="item in btn">{{item}}</div>'
        + '</div>',
    mounted: function() {
        console.log(this.freeData)
    },
    methods: {
        getAttr: function (attrName) {
            console.log(this)
            return this[attrName]
        }
    },
}

父组件:

var vm = new Vue({
            el: "#app",
            data: {
                title: "科目" + UrlSearch().subject + "答题",
                person: 100,
                questionIndex: 0,
                second: 10,
                totalSeconds: 0,
                questions: [
                    {
                        Id: 1,
                        Description: "What's your doing?",
                        Answers: [
                            { Radio: "A", Text: "Sleep." },
                            { Radio: "B", Text: "Play game." },
                            { Radio: "C", Text: "Watch a movie." },
                            { Radio: "D", Text: "Write a program" },
                        ],
                        Answer: "",
                    }, {
                        Id: 2,
                        Description: "Your phone's os is android or ios?",
                        Answers: [
                            { Radio: "A", Text: "Android." },
                            { Radio: "B", Text: "IOS." },
                            { Radio: "C", Text: "Each other." },
                            { Radio: "D", Text: "Other." },
                        ],
                        Answer: "",
                    }, {
                        Id: 3,
                        Description: "Your phone's os is android or ios?",
                        Answers: [
                            { Radio: "A", Text: "Android." },
                            { Radio: "B", Text: "IOS." },
                            { Radio: "C", Text: "Each other." },
                            { Radio: "D", Text: "Other." },
                        ],
                        Answer: "",
                    }, {
                        Id: 4,
                        Description: "Your phone's os is android or ios?",
                        Answers: [
                            { Radio: "A", Text: "Android." },
                            { Radio: "B", Text: "IOS." },
                            { Radio: "C", Text: "Each other." },
                            { Radio: "D", Text: "Other." },
                        ],
                        Answer: "",
                    }, {
                        Id: 5,
                        Description: "Your phone's os is android or ios?",
                        Answers: [
                            { Radio: "A", Text: "Android." },
                            { Radio: "B", Text: "IOS." },
                            { Radio: "C", Text: "Each other." },
                            { Radio: "D", Text: "Other." },
                        ],
                        Answer: "",
                    },
                ],
            },
            created: function() {
                var that = this
                setInterval(function() {
                        if (that.readSecond())
                            that.nextQuestion()
                    },
                    1000);
            },
            computed: {
                cvs: function () {
                    return [{
                        isActive: true,
                        content: cvs1.text,
                    }]
                },
            },
            mounted: function() {

            },
            methods: {
                selectAnswer: function(radio) {
                    this.questions[this.questionIndex].Answer = radio
                    console.log(this.questions[this.questionIndex])
                },
                nextQuestion: function() {
                    if (this.questionIndex == this.questions.length - 1) {
                        this.cvs[0].isActive = true
                    }
                    if ((this.questions[this.questionIndex].Answer || this.second <= 0) && this.questionIndex < this.questions.length - 1) {
                        this.questionIndex++
                        this.totalSeconds += 10 - this.second
                        this.second = 10
                    }
                },
                readSecond: function() {
                    if (this.questionIndex < this.questions.length && this.second > 0)
                        this.second--
                    return this.second <= 0
                },
            },
            components: {
                "bp-conversation": Conversation,
                "bp-header": Header,
            },
        })

子组件使用:

<bp-conversation v-bind="cvs[0]" ></bp-conversation>
<script id="cvs1" type="text/html">
        <img src='/moguhd/images/hd/hd1032/popup_1.png' style="width:85%" />
        <div>{{totalSeconds}}</div>
    </script>

页面:

Answer 1

你这当然不会解释了，首先你吧模版当作了字符串用v-html写入了dom，这都意味着数据都挂载完了，里面的变量都不再做解析了，另外，你这么传模版，参数不传，这个组件是有作用域的，即便你不这么写，也应该是显示不出来，你直接{{content}}试一下，另外把 totalSeconds 也放在组件上当属性传递过去试试

Answer 2

<bp-conversation v-bind="cvs[0]" :totalSeconds="你要传的值"></bp-conversation>

子组件中

 props: {
        totalSeconds:Number,
        content: String,
        btn: Array,
        isActive: Boolean,
        freeData:Object,
    },