受到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更是沒問題了，就不演示了。
受到html本身的一些限制，像<ul>、<ol>、<table>、<select>這樣的元素里允許包含的元素有限制，而另一些像<option>這樣的元素只能出現在某些特定元素的內部。變通的方案是使用特殊的 is 特性
應當注意，如果使用來自以下來源之一的字符串模板，則沒有這些限制：
--------<script type="text/x-template">
--------<javascript>內聯模板字符串
--------.vue組件
這句話意思是：
這樣不可以
但是用 is 特殊屬性可以
或者temp模板標簽也可以
或者內聯模板字符串也行
當然了，單頁應用的組件文件xxx.vue更是沒問題了，就不演示了。