组件的注册

最新推荐文章于 2023-11-13 09:30:00 发布
最新推荐文章于 2023-11-13 09:30:00 发布
阅读量300 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panda_pan9527/article/details/97820204
版权

组件的注册

  1. 通过实例化Vue构造器函数得到一个Vue实例,这个实例我们称之为’根实例’，它是最大的父级

  2. 这个根实例是以标签的形式存在的，那么我们也称之为’ 根组件 ’

  3. 根实例也是一个组件，但是我们得到只是跟组件

  4. Vue.extend() 它就是对Vue功能的扩展，这个扩展就是组件

  5. Vue是通过 Vue.extend() 来实现【 扩展 】 Vue的功能的，这个功能就是组件

  6. 思考: Vue.extend如何使用？

    • 通过new Vue.extend() 发现和new Vue一样了 排除了
    • 组件就是一个以标签化呈现的东西，所以我应该像标签一样使用
    • 但是无论是 html3 还是 html5 肯定不会同意它随意来个标签的
    • Vue会将组件编译成html结构
    • Vue的这个处理过程，我们称之为 ’ 组件注册 ’

​ 总结:

​ 1. Vue是通过Vue.extend() 来实现组件的

​ 2. Vue的组件的使用时需要注册的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 不能这么写 -->
    <!-- <HelloBoy></HelloBoy> -->

    <!-- <hello-boy></hello-boy> -->

    <Hello></Hello>
    <hello></hello>

  </div>


  <div id="root">
    <Hello></Hello>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    全局注册
      1. 格式： Vue.component()
  */

  // const Hello = Vue.extend( options ) 我们之所学的选项这里都可以用
  const Hello = Vue.extend({
    template: '<div> Hello 组件 </div>'
  })
  // Vue.component( 组件的名称,组件的配置 )
  // Vue.component( 'HelloBoy', Hello )
  // Vue.component( 'hello-boy', Hello )
  Vue.component( 'Hello', Hello )
  
  new Vue({
    el: '#app'
  })


  new Vue({
    el: '#root'
  })
</script>
</html>

简写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 不能这么写 -->
    <!-- <HelloBoy></HelloBoy> -->

    <!-- <hello-boy></hello-boy> -->

    <Hello></Hello>
    <hello></hello>

  </div>


  <div id="root">
    <Hello></Hello>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    全局注册
      1. 格式： Vue.component()
  */

  // vue组件注册的简写
  Vue.component( 'Hello', {
    template: '<div> Hello 组件 </div>'
  })
  
  new Vue({
    el: '#app'
  })


  new Vue({
    el: '#root'
  })
</script>
</html>

组件的局部注册

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 不能这么写 -->
    <!-- <HelloBoy></HelloBoy> -->

    <!-- <hello-boy></hello-boy> -->

    <Hello></Hello>
    <hello></hello>

  </div>


  <div id="root">
    <Hello></Hello>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>


  /* 
    局部注册使用  components选线来完成
    局部注册只在当前注册的实例范围内有效
  */
  new Vue({
    el: '#app',
    components: { //局部注册组件的选项
      // 组件的名称： 组件的选项
      'Hello': {
        template: '<div> Hello 这里是局部注册 </div>'
      }
    }
  })


  new Vue({
    el: '#root'
  })
</script>
</html>

组件的使用规则

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">

    <table border="1"> 
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr is = "Hello"></tr>
    </table>

  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    业务： 给上面的表格增加一个行，这一行用一个组件表示
    

    通过以上案例发现： 组件在父子级是有直接关系的标签中是不能直接解析的，会出问题

    直接父子级关系的标签
      ul li 
      ol li
      table tr  td
      dl dd dt
      select 
      
    如何解决这个问题？

      我们使用is属性来解决

  */

  Vue.component('Hello',{
    template: ` <tr>
                  <td>4</td>
                  <td>5</td>
                  <td>6</td>
                </tr>`
  })

  new Vue({
    el: '#app'
  })
</script>
</html>
panda_pan9527
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
组件注册工具
07-21
组件注册工具
Vue学习 组件基础 组件的两种注册方式 动态组件的应用
努力！加油！！
03-16 2764
Vue学习 组件基础 组件的两种注册方式 动态组件的应用
Vue----组件注册
emmmm.....
04-21 6270
文章目录组件的注册1.1 注册组件的两种方式1.2 全局注册组件1.3 使用全局注册组件1.4 局部注册组件1.5 全局注册和局部注册的区别1.6 组件注册时名称的大小写1.7 通过 name 属性注册组件 组件的注册 组件之间可以进行相互的引用。 vue 中组件的引用原则：先注册后使用。 1.1 注册组件的两种方式 vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中： 被全局注册的组件，可以在全局任何一个组件内使用 被局部注册的组件，只能在当前注册的范围内使用 1.2 全局注册组件 /
Vue中组件的三种注册方式
yxf0448的博客
09-12 2066
Vue中组件的注册方式
vue-组件注册及使用
最新发布
唯见青山不见君
11-13 1275
vue-组件注册及使用
Vue项目注册组件
weixin_62946736的博客
10-14 2135
注册组件的三步走：1、定义组件（创建组件）2、注册组件 3、使用组件（写组件标签）
Vue 组件注册实例详解
10-17
主要介绍了Vue 组件注册,结合实例形式较为详细的分析了vue.js组件的常见分类、注册方法及相关操作注意事项,需要的朋友可以参考下
易语言组件注册工具
08-21
易语言组件注册工具源码系统结构:易语言组件注册工具源码,组件注册工具 ======窗口程序集1 || ||------_驱动器框1_驱动器被改变 || ||------_文件框1_选择文件被改变 || ||------_目录框1_目录被
『Vue组件』全局注册与局部注册及组件命名
Dpl0216的博客
06-28 2099
组件注册的方式在Vue中组件的注册一般可以分为两种方式，全局注册与局部注册。同时组件的命名可以使用Pascal、Kebab两种命名方式。
COM 组件注册方法
03-18
有两种方式注册组件： 一种是调用regsvr32.exe： 例如我们运行regsvr32.exe c:\test.dll来注册位于C:盘根目录下的test.dll。 逆@风@者 另外一种是在MTS（微软事务服务器）中注册。MTS是值得推荐的，因为它具有下列优点： 1、动态卸载平衡，提高组件和基于组件的应用程序的升级性。 2、包含公布和提交事件和队列组件的能力，使得更容易与多个组件联合。
WIN32 COM组件 的实现及注册
12-03
通过一个简单的组件实现两个接口，CoCreateInstance 调用 DLLGetClassObject返回相应的组件类厂 类厂调用CreateInstance创建组件 用DLLRegisterServer向注册表中加一个组件ID，前提是要对注册表中CLSID下的结构有一定的基础。
spring-注册组件的4种方法
weixin_37607613的博客
03-15 913
通过@ComponentScan扫描指定包，将包下的标注@Controller、@Service、@Repository、@Component的bean注册到IOC容器中。在配置类中使用@Bean注解将方法返回值对象注册到IOC容器中，id默认是方法名称，可通过value参数指定id。通过@Import注解将Bean注册到IOC容器中。通过工厂bean将bean注册到容器中。实现FactoryBean接口。...
简单说一下组件注册
dreaming_drop的博客
05-17 1675
1.什么是组件？ 组件其实就是页面组成的一部分，可以将它理解为模块，组件同模块一样，是自己独立的，有完整的功能，相互之间是剥离的、互不影响的，很大的一个作用是能够进行复用，组件化后，具有高内聚性和低耦合度 2.组件注册 使用组件需要先注册组件，组件的注册分为全局注册和局部注册。全局注册就是在Vue上注册，然后直接挂载就可以使用；局部注册则是挂载之后再进行注册。注册组件的数据选项为component(局部注册需要加s) 局部注册：如下所示，挂载在id为try的标签上后注册名字为...
Vue组件注册
PengK_aha的博客
11-30 1149
Vue组件注册使用
Vue注册组件的几种方式,你都知道吗?
weixin_64252848的博客
04-06 1万+
在开发中,经常需要将业务进行组件化,我们就需要去注册组件,下面列举几种常用的注册组件的方法 局部注册组件 1.首先需要将要注册的组件进行引入 2.在script标签中进行注册,注意:组件注册的名字和引入的名字需要保持一致即可进行简写 3.在template标签中以html的标签格式进行使用 全局注册组件 1.全局入口在main.js, 在new Vue之上注册 2.将要注册的组件进行引入 3. 全局 - 注册组件 语法:Vue.component("组...
Vue注册组件的3种方式
热门推荐
sinat_38832964的博客
05-30 3万+
第一种方式 extend: vue.js中这样写： var com1 = Vue.extend({ template:'<h3>这是第一种方式</h3>' }); Vue.component("myCom1",com1); 注：myCom1是采用的驼峰命名方式，所以html中这样写： <my-com1></my-com1> 注：如果不采用驼...
vue注册组件的方法
qq_45228255的博客
05-01 1103
vue注册组件的公共方法
vue 组件——注册组件的基本步骤
qq_45949046的博客
06-02 3955
vue 组件——注册组件的基本步骤 注册组件的基本步骤 参考官网资料 1、创建组件构造器 调用Vue.extend()方法 2、注册组件 调用Vue.component()方法 3、使用组件 在Vue实例的作用范围内使用组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件基本步骤</title> <scr
vue 组件注册事件
07-28
在Vue中，你可以使用`@`或`v-on`指令来注册组件事件。以下是两种不同的方法： 1. 使用`@`指令： ```vue <button @click="handleClick">Click me export default { methods: { handleClick() { // 处理点击...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值