浅谈Vue下的components模板

本文介绍了Vue.js中组件模板的基本使用方法,包括局部模板、全局模板的创建方式及模板的继承等概念。通过实例展示了不同类型的组件如何定义和使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


浅谈Vue下的components模板

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

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

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

/*
这是最简单常用的一种创造模板方法,局部方法创造模板
要注意,局部模板 的作用范围 只在 相对的vue对象 范围内 
比如 这个例子, <haha></haha>的范围 只在 <div id="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:{
   //这里则不需要添加,因为 互不影响
  }
});

其他方法

<div id="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 
    }
 }

//创建 父亲 模板
  let parent = { 
    template:"<div>父亲<son></son></div>"
    components:{
     son
    }
 }
//实例化vm对象
  let vm = new Vue({
    el:"#app",
    data:{
    },
    components:{
      parent
    }
});
vue-draggable的原理是基于sortable.js插件来实现的。sortable.js是一个根据DOM操作实现拖拽功能的插件,而vue-draggable作为一个针对Vue框架的插件,将sortable.js和Vue的数据驱动视图结合起来。 vue-draggable利用Vue的组件化特性,将sortable.js的拖拽功能封装成一个可复用的Vue组件。通过在Vue组件中使用vue-draggable,我们可以直接在Vue模板中使用拖拽功能,而无需直接操作DOM。 具体实现原理是通过监听用户的拖拽操作,然后更新Vue组件中的数据,从而实现对数据的排序和更新。当用户拖拽某个元素时,vue-draggable会根据sortable.js的回调函数,更新Vue组件中的数据,然后重新渲染视图。 总结来说,vue-draggable通过将sortable.js和Vue的数据驱动视图结合起来,实现了在Vue框架中使用拖拽功能的原理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue-draggable-resizable伸缩antdv的a-table表格列时components等数据的写法](https://blog.youkuaiyun.com/renovateF5/article/details/124591971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [浅谈vue-draggable原理](https://blog.youkuaiyun.com/weixin_43160044/article/details/127349586)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值