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

子组件:

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='https://segmentfault.com/moguhd/images/hd/hd1032/popup_1.png' />
<div>{{totalSeconds}}</div>
</script>

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

回答

你这当然不会解释了，首先你吧模版当作了字符串用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,
    },

以上是 vue.js 传入模板到子组件{{}}无法解析 的全部内容， 来源链接： utcz.com/a/108982.html

回到顶部