内联模板

点击打开视频讲解更加详细

当 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> 

srccomponentsHelloWorld.vue

<template>   <div class="hello">     子组件   </div> </template>  <script> export default {   name: 'HelloWorld',   props: [],    data(){     return{            }   },   mounted(){        },   components:{        },   methods:{        } } </script>  <style scoped>  </style> 

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！