DDR爱好者之家

Vue自定义组件的四种方式示例详解
站长资源 2024/11/24 佚名
11 1538
DDR爱好者之家 Design By 杰米

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

规则：

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定义组件一样，同样可以配合定义全局/局部组件。

总结

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米