不灭的焱

革命尚未成功,同志仍须努力

作者:php-note.com  发布于:2020-09-19 13:52  分类:HTML/CSS/JS  编辑

1.全局组件

定义方式示例:

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

使用:

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

属性介绍:

  • Vue.component():是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定义组件一样,同样可以配合定义全局/局部组件。

 

 

参考:

组件基础 - Vue.js 

Vuejs自定义组件的四种方式