问答

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

作者:admin 2021-05-06 我要评论

子组件: var Conversation = { data: function () { return { } }, props: { content: String, btn: Array, isActive: Boolean, freeData:Object, }, template: ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

子组件:


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>

页面:
image.png
image.png

###

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

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

子组件中

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue.js 传入模板到子组件{{}}无法解析

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

  • 快来人啊,愁死我了,为什么vue中的样

    快来人啊,愁死我了,为什么vue中的样

  • 如下js是什么意思?

    如下js是什么意思?

  • Jest怎么测试js方式创建script标签加载

    Jest怎么测试js方式创建script标签加载

腾讯云代理商
海外云服务器