浅谈Vue下的components模板

2022年6月16日13:16:49

浅谈Vue下的components模板

晴 微风 温度 12-24°C
在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用

我们先来简单的写一段components代码
(局部方法创造模板)

<divid="app">
  <haha></haha>
</div>

/*
这是最简单常用的一种创造模板方法,局部方法创造模板
要注意,局部模板 的作用范围 只在 相对的vue对象 范围内 
比如 这个例子, <haha></haha>的范围 只在 <divid="app"> </div>内
因为  haha 挂载在 vm的components下 而 vm挂载的 对应节点是id=app的div上
*/
let vm = new Vue({
    el:"#app",
    data:{
  },
    components:{"haha":{
      template:"<div>哈哈哈<div>"
    }
  }
});

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

<div id="app">
  <hehe></hehe>
</div>//这里使用Vue.component原型方法来创造
  Vue.component("hehe",template:"<div>呵呵呵<div>"
);

let vm =new Vue({
    el:"#app",
    data:{
  },
    components:{//这里则不需要添加,因为 互不影响
  }
});

其他方法

<divid="app"><xixi></xixi></div>

let xixi={
  template:"<div>嘻嘻嘻<div>"
}

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

});

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

/*
  我们来讲个最简单的 父亲,儿子 ,孙子的 例子
  要注意以下几点:
        1.先实例化对象vm
        2.造出parent模板,并挂载在 vm的 conponents 下
        3.造出 son 模板 并 挂载 在 父级 parent 的conponents下,并在 父级template属性中 包裹住自己的 模板名标签 ;同理 造出孙子标签
        4.在HTML节点中添加 目标 根节点
              (节点的顺序一定要书写正确)
*/<div id="app"><parent></parent></div>//创建 孙子 模板let grendson= { 
    template:"<div>孙子</div>"
 }//创建 儿子 模板let son= { 
    template:"<son>儿子<grendson >孙子</grendson ></son>"
    components:{
     grendson 
    }
 }//创建 父亲 模板letparent= { 
    template:"<div>父亲<son></son></div>"
    components:{
     son
    }
 }//实例化vm对象let vm=new Vue({
    el:"#app",data:{
    },
    components:{parent
    }
});
  • 作者:金城阿武
  • 原文链接:https://blog.csdn.net/q390445046/article/details/80509191
    更新时间:2022年6月16日13:16:49 ,共 1213 字。