您好,登录后才能下订单哦!
四种组件定义方式都存在以下共性(血泪史)
规则:
1.组件只能有一个根标签
2.记住两个词全局和局部
3.组件名称命名中‘-小写字母'相当于大写英文字母(hello-com 相当于 helloCom)
而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码。
1.全局组件
定义方式示例:
Vue.component("hello-component",{ props:["message"], template :"<div ><h2>组件定义之全局组件</h2><h5>{{message}}</h5></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><h2>{{message}}</h2><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通过对象方式传递组件
品鉴
3.Script方式注册组件
定义方式示例:
<script type="text/template" id="script-component"> <div > <h3>自定义组件之script方式定义</h3> <h5>{{message}}</h5> </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还可以取的值还可以有:
品鉴
Script定义组件方式笔者觉得就是组件定义方式的另一种写法。优点在于不用写字符串式HTML代码。将<script id="XX">的XX赋值给局部组件或者全局组件都可。
4.<template>创建组件
定义方式示例:
<template id="cc"> <div > <h2>{{message}}</h2> </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 自定义组件内容请搜索亿速云以前的文章或继续浏览下面的相关文章希望大家以后多多支持亿速云!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。