本文共 1227 字，大约阅读时间需要 4 分钟。

1、引言

学习Vue是今年的一项安排，今天看官方文档时遇到了component这个内置组件，想着还是写一篇博客记载一下吧。

2、常见模板组件

3、(共有模板/全局模板)，全局模板 顾名思义 肯定是 放在哪里都能用

   
  
    
   
//这里使用Vue.component原型方法来创造  Vue.component(  "hehe",template:"
   
    呵呵呵
    
     ");let vm = new Vue({
       el:"#app",    data:{
     },    components:{
      //这里则不需要添加,因为 互不影响  }});
    
   

4、其他方法

   
  
    
   
let xixi={
     template:"
   
    嘻嘻嘻
    
     "}let vm = new Vue({
     el : "#app",  data{
     },  components:{
       xixi  }});
    
   

5、(模板的继承)，全局模板 顾名思义 肯定是 放在哪里都能用

/*  我们来讲个最简单的 父亲，儿子 ，孙子的 例子  要注意以下几点：        1.先实例化对象vm        2.造出parent模板,并挂载在 vm的 conponents 下        3.造出 son 模板 并 挂载 在 父级 parent 的conponents下，并在 父级template属性中 包裹住自己的 模板名标签 ；同理 造出孙子标签        4.在HTML节点中添加 目标 根节点              （节点的顺序一定要书写正确）*/
   
  
    
   
//创建 孙子 模板  let grendson = {
        template:"
   
    孙子
   
" }//创建 儿子 模板  let son= {
        template:"
   
    儿子
    
     孙子
    
   "    components:{
        grendson     } }//创建 父亲 模板  let parent = {
        template:"
   
    父亲
    
   
"    components:{
        son    } }//实例化vm对象  let vm = new Vue({
       el:"#app",    data:{
       },    components:{
         parent    }});

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

学如逆水行舟，不进则退

转载地址：https://chocolate.blog.csdn.net/article/details/103979014 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！