Vue自定义组件的四种方式示例详解

四种组件定义方式都存在以下共性(血泪史)

规则：

1.组件只能有一个根标签

2.记住两个词全局和局部

3.组件名称命名中‘-小写字母'相当于大写英文字母(hello-com 相当于 helloCom)

而对于在HTML中自定义组件的时候有4种写法，不过也只是殊途同归，都是用template属性对应的只有一个根标签的HTML代码。

1.全局组件

定义方式示例：

Vue.component("hello-component",{
  props:["message"],
  template :"<div ><h1>组件定义之全局组件</h1><h4>{{message}}</h4></div>"
});

使用

<hello-component message=" global component"></hello-component>

属性介绍：

Vue.componen()是vue.js内部封装方法
"hello-component" 是使用时候的组件名称
props组件内的属性。供给组件内部传值
template组件内部DOM元素组成

品鉴

全局组件定义方式，是直接给全局对象Vue注册了一个组件。在本页内已挂载Vue 实例的DOM目标元素 都可以使用(区别于局部组件只能是挂载哪一个DOM，哪个才能使用)。

2.局部组件

定义方式示例：

var limitComponent = {
  props:["message"],
  template :"<div><h1>{{message}}</h1><input \
  type='text' v-model='message'></input></div>"
}
new Vue ({
  el : "#app",
  components :{
    "child-component": limitComponent
  }
});

使用

<child-component message = "动态局部组件"></child-component>

属性介绍：

el是 Vue 实例的挂载目标
"components" 是注册仅在其作用域中可用的组件
"child-component"组件的名称(书写规则请上翻再看规则)
limitComponent通过对象方式传递组件

品鉴

  • 你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件。
  • js中用反斜线“\”'实现字符串换行

3.Script方式注册组件

定义方式示例：

<script type="text/template" id="script-component">
  <div >
    <h2>自定义组件之script方式定义</h2>
    <h4>{{message}}</h4>
  </div>
</script>
<script>
  Vue.component("mymac",{
    props:["message"],
    template:"#script-component"
  })

  var newVue = new Vue({
    el:"#mac",
    data:{
      mydata:"春暖花开"
    }
  });
</script>

使用

<div id="mac" >
  <input type="text" v-model="mydata" />
  <mymac v-bind:message="mydata"></mymac>
</div>

属性介绍：

<script type="text/template" id="script-component">为定义组件的一种写法，type还可以取的值还可以有：

  • text/javascript: 说明这一段脚本语言是javascript。告诉浏览器这一段要按照javascript来解释执行。在ES5之前的type默认值
  • text/ecmascript:JavaScript和ECMAScript是相同的，只是在名称上是不同的。但是对于ecmascript-6而言就可以理解是JS的新语法特性。即HTML5中的默认值
  • application/ecmascript: ie6、7、8都是没法识别里面的js语句的
  • application/javascript: 这个属性在IE8以下的浏览器中无法被识别。
  • text/vbscript: 表示该脚本语言是vb脚本

品鉴

Script定义组件方式笔者觉得就是组件定义方式的另一种写法。优点在于不用写字符串式HTML代码。将<script id="XX">的XX赋值给局部组件或者全局组件都可。

4.<template>创建组件

定义方式示例：

<template id="cc">
  <div >
    <h1>{{message}}</h1>
  </div>

</template>
<script>
  Vue.component('templatec',{
    props:["message"],
    template:"#cc"
  })
  new Vue({
    el:"#MyTemp"
  })
</script>

使用

<div id="MyTemp">
  <templatec message ="template组件之Template标签"></templatec>
</div>

属性介绍：

<template> 为HTML5发布后用来声明是“模板元素”的标签。即HTML5之前使用<script type ="text/template">方式声明，而HTML5之后可用<template> 标签

品鉴

<template>定义组件的方式实际是HTML语法升级后的<script type ="text/template">的另一种写法。同script定义组件一样，同样可以配合定义全局/局部组件。

总结

通篇全文，介绍的四种方式。实际上只有两种方式。要不就是全局定义方式，要不就是局部定义方式。另外两种是为了增加代码开发效率将字符串写法换成标签式书写方式。

到此这篇关于Vuejs自定义组件的四种方式的文章就介绍到这了,更多相关vue 自定义组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue在自定义组件中使用v-model进行数据绑定的方法

    本文介绍了vue v-model进行数据绑定,分享给大家,具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event. 示例: 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <p class="parent"> <p>我是父亲, 对儿

  • vue如何在自定义组件中使用v-model

    v-model指令 所谓的"指令"其实就是扩展了HTML标签功能(属性). 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <div class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child @returnBack="turnBack" :give="st

  • Vue结合原生js实现自定义组件自动生成示例

    Vue结合原生js实现自定义组件自动生成示例

    就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(-).这又是为何呢,下一

  • vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

    上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo

  • vue 自定义组件实现通讯录功能

    在线demo:http://tangyupeng.top/dist/index.html#/phone <template> <div> <my-header custom-title="通讯录" custom-fixed > <button @touchstart="backBtn" slot="left">首页</button> <button @touchstart=&quo

  • Vue自定义组件的四种方式示例详解

    四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t

  • C#获取本地IP的四种方式示例详解

    1.第一种方式 采用System.Net.Dns的GetHostAddress的方式,具体请看代码: /// <summary> /// 网络不通畅可以获取 /// 不过能获取到具体的IP /// </summary> /// <returns></returns> public static List<IPAddress> GetByGetHostAddresses() { try { IPAddress[] adds = Dns.GetHos

  • Vue路由切换的两种方式示例详解

    目录 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 1.2 路径切换 1.3 path切换 1.4 name切换(推荐) 2. js切换 Vue路由切换的两种方式 1. 标签切换 1.1 <a>标签切换 语法:<a href=“# + 路由路径”>标签内容</a> 例子: 路由规则为: const router = new VueRouter({ //路由对象数组 routes: [{ path: '/login', component:

  • C#开启线程的四种方式示例详解

    C#开启线程的四种方式示例详解

    一.异步委托开启线程 public static void Main(string[] args){ Action<int,int> a=add; a.BeginInvoke(3,4,null,null);//前两个是add方法的参数,后两个可以为空 Console.WriteLine("main()"); Console.ReadKey(); } static void add(int a,int b){ Console.WriteLine(a+b); } 运行结果: 如

  • node运行js获得输出的三种方式示例详解

    一.通过console.log输出(我最喜欢的) 1.js脚本 1.js var arguments = process.argv.splice(2); //获得入参 var a= arguments[0]; 取第一个 console.log(a) //输出 2.python脚本 test_1.py import os print(os.popen('node 1.js fuck').read()) #打印结果fuck 二.通过文件读写获取 1.js脚本 1.js //npm环境别忘了装了 va

  • JavaScript 对象的四种方式比较详解

    目录 前言 1. 引用比较 2. 手动比较 3. 浅层比较 4. 深层比较 5. 总结 前言 比较 JavaScript 中的值非常简单,只需用相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化的数据,所以比较起来比较困难.在本文中,你将学习如何正确比较 JavaScript 中的对象. 1. 引用比较 JavaScript 提供了 3 种方法来对值进行比较: 严格相等运算符 === 宽松相等运算符

  • Vue实现拖拽穿梭框功能四种方式实例详解

    Vue实现拖拽穿梭框功能四种方式实例详解

    目录 一.使用原生js实现拖拽 二.VUe使用js实现拖拽穿梭框 三.Vue 拖拽组件 vuedraggable 四.Awe-dnd指令封装 一.使用原生js实现拖拽 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue;

  • SpringMVC异步处理的 5 种方式示例详解

    前段时间研究了下 diamond 的原理,其中有个重要的知识点是长连接的实现,用到了 servlet 的异步处理.异步处理最大的好处是可以提高并发量,不阻塞当前线程.其实 Spring MVC 也支持了异步处理,本文记录下相关的技术点. 异步处理 demo 如果要启用异步返回,需要开启 @EnableAsync.如下的代码中,使用 DeferredResult 进行异步处理. 请求进来后,首先创建 DeferredResult 对象,设置超时时间为 60 秒.然后指定DeferredResult

  • Java多线程实现四种方式原理详解

    1.继承Thread类,重写run方法 2.实现Runnable接口,重写run方法,实现Runnable接口的实现类的实例对象作为Thread构造函数的target 3.通过Callable和FutureTask创建线程 4.通过线程池创建线程 前面两种可以归结为一类:无返回值,原因很简单,通过重写run方法,run方式的返回值是void,所以没有办法返回结果 后面两种可以归结成一类:有返回值,通过Callable接口,就要实现call方法,这个方法的返回值是Object,所以返回的结果可以放

  • c#使用多线程的几种方式示例详解

    (1)不需要传递参数,也不需要返回参数 ThreadStart是一个委托,这个委托的定义为void ThreadStart(),没有参数与返回值. 复制代码 代码如下: class Program { static void Main(string[] args) { for (int i = 0; i < 30; i++) { ThreadStart threadStart = new ThreadStart(Calculate); Thread thread = new Thread(thr

随机推荐