链接描述在Vuejs的入门文档中看到这个,有点不太理解,我试过用反引号,但是会报错,又去搜索所谓内联模板字符串,也没有发现完全匹配的答案.求指导.
4 回答
手掌心
TA贡献1942条经验 获得超3个赞
大神们不要把问题复杂化好不啦
受到 HTML 本身的一些限制,像 <ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。变通的方案是使用特殊的 is 特性
应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：
-----------<script type="text/x-template">
-----------JavaScript 内联模板字符串
-----------.vue 组件
这句话意思是：
这样不可以
<body>
<div id="app">
<select>
<optioncomp></optioncomp>
</select>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
components:{
'optioncomp':{
template: '<option >a</option>'
}
}
})
</script>
</body>
但是用is特殊属性可以：
<body>
<div id="app">
<select>
<option is="optioncomp"></option>
</select>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
components:{
'optioncomp':{
template: '<option >a</option>'
}
}
})
</script>
</body>
或者temp模板标签也可以
<body>
<div id="app">
<select>
<option is="optioncomp"></option>
</select>
<!--模板内容存放区域-->
<script type="x-template" id="optioncompTemp">
<option >a</option>
</script>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
components:{
'optioncomp':{
template: '#optioncompTemp'
}
}
})
</script>
</body>
或者内联模板字符串也行
<body>
<div id="app">
<selectcomp></selectcomp>
</div>
<script src="lib/vue.js"></script>
<script>
Vue.component('optioncomp',{
template: '<option >a</option>'
});
new Vue({
el: '#app',
components:{
'selectcomp':{
template: ' <select> <optioncomp></optioncomp></select>'
}
}
})
</script>
</body>
当然了，单页应用的组件文件xxx.vue更是没问题了，就不演示了
HUWWW
TA贡献1874条经验 获得超12个赞
类似于下面这种，可能含有mustache表达式的，同时支持es6模板字符串语法。
<div id="app">
<checkbox-test></checkbox-test>
</div>
</body>
<script>
var content="content-test";
Vue.component('checkbox-test', {
template: `<div @click="check">
<div class="title">{{ title }}</div>
<div class="title">${content}</div>
</div>`,
data() {
return { checked: false, title: 'title-test' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
window.vm=new Vue({
el:"#app",
});
</script>
页面效果
紫衣仙女
TA贡献1839条经验 获得超15个赞
//内联模板字符串
Vue.component('component1',{
template: '<tr><td>child component</td></tr>'
});
Vue.component('component2',{
template: '<table><component1></component1></table>'
});
添加回答
举报
0/150
提交
取消