055_末晨曦Vue技术_处理边界情况之内联模板
内联模板
当 inline-template 这个特殊的 attribute 出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
内联模板需要定义在 Vue 所属的 DOM 元素内。
注意：不过，inline-template 会让模板的作用域变得更加难以理解。所以作为最佳实践，请在组件内优先选择 template 选项或 .vue 文件里的一个 <template> 元素来定义模板。
案例：
<template>
<div id="app">
<!-- <HelloWorld></HelloWorld> -->
<!-- 当 inline-template 这个特殊的 attribute 出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，
而不是将其作为被分发的内容 -->
<HelloWorld inline-template>
<div>
我是内联模板
</div>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return {
}
},
mounted() {
},
components:{
HelloWorld
},
methods:{
}
}
</script>
<style scoped>
</style>
src\components\HelloWorld.vue
<template>
<div class="hello">
子组件
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: [],
data(){
return{
}
},
mounted(){
},
components:{
},
methods:{
}
}
</script>
<style scoped>
</style>
