055_末晨曦Vue技术_处理边界情况之内联模板

内联模板

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

当 inline-template 这个特殊的 attribute 出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。

  
    
These are compiled as the component's own template.
    
Not parent's transclusion content.
  

内联模板需要定义在 Vue 所属的 DOM 元素内。

注意：不过，inline-template 会让模板的作用域变得更加难以理解。所以作为最佳实践，请在组件内优先选择 template 选项或 .vue 文件里的一个 元素来定义模板。

案例：

  
    <!--  -->              
        我是内联模板            import HelloWorld from './components/HelloWorld.vue'export default {  name: 'App',  data(){    return {    }   },  mounted() {      },  components:{    HelloWorld  },  methods:{      }} 

src\components\HelloWorld.vue

  
    子组件  export default {  name: 'HelloWorld',  props: [],   data(){    return{          }  },  mounted(){      },  components:{      },  methods:{      }}

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