vue组件---组件注册

时间  2019-11-17
标签 vue 组件 注册 繁體版
原文   原文链接

（1）组件名javascript

    在注册一个组件的时候，咱们始终须要给它一个名字。好比在全局注册的时候咱们已经看到了：html

Vue.component('my-component-name', { /* ... */ })

    该组件名就是 Vue.component 的第一个参数。你给予组件的名字可能依赖于你打算拿它来作什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，强烈推荐遵循 W3C 规范中自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及将来的 HTML 元素相冲突。能够在风格指南中查阅到关于组件名其它建议。vue

   组件名大小写：定义组件名的方式有两种：java

   ①kebab-case横断线分隔命名ios

Vue.component('my-component-name', { /* ... */ })

    当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。axios

   ②PascalCase大驼峰命名数组

Vue.component('MyComponentName', { /* ... */ })

    当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法均可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。浏览器

（2）全局注册app

    到目前为止，咱们只用过 Vue.component 来建立组件：less

Vue.component('my-component-name', {
  // ... 选项 ...
})

    这些组件是全局注册的。也就是说它们在注册以后能够用在任何新建立的 Vue 根实例 (new Vue) 的模板中。好比：

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })
<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

    在全部子组件中也是如此，也就是说这三个组件在各自内部也均可以相互使用。

（3）局部注册（待验证）

import Vue from 'vue';
import App from './App';
import router from './route';
import axios from 'axios';
import './less/index';

（4）模块系统（待验证）

（5）Prop

      先来简单回顾下组件

    <div class="component_area">
        <register-area v-for="info in infos" v-bind:info="info.name"></register-area>
    </div>
    <script type="text/javascript">
        Vue.component('register-area',{
            props:['info'],
            template:"<div>{{info}}</div>"
        })
        new Vue({
            el:".component_area",
            data:{
                infos:[
                    {name:"展现信息1"},
                    {name:"展现信息2"},
                    {name:"展现信息3"}
                ]
            }
        })
    </script>

结果：

    

    ①Prop 的大小写 (camelCase vs kebab-case)

    HTML 中的特性名是大小写不敏感的，因此浏览器会把全部大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名须要使用其等价的 kebab-case (短横线分隔命名) 命名：

        Vue.component('register-area',{
            // 在 JavaScript 中是 camelCase 的
            props:['infoArea'],
            template:"<div>{{infoArea}}</div>"
        })
        new Vue({
            el:".component_area",
            data:{
                infos:[
                    {name:"展现信息1"},
                    {name:"展现信息2"},
                    {name:"展现信息3"}
                ]
            }
        })
<div class="component_area">
    <!-- 在 HTML 中是 kebab-case 的 -->
    <register-area v-for="info in infos" v-bind:info-area="info.name"></register-area>
</div>

    注意：若是你使用字符串模板，那么这个限制就不存在了

    ②Prop类型

    以前只看到了以字符串数组形式列出的 prop：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

    可是，一般你但愿每一个 prop 都有指定的值类型。这时，你能够以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

    这不只为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。你会在这个页面接下来的部分看到类型检查和其它 prop 验证。

     ③传递静态或动态Prop

         一、能够像这样给 prop 传入一个静态的值：

<div class="prop_area">
    <prop-dom info="我是标题信息1"></prop-dom>
    <prop-dom info="我是标题信息2"></prop-dom>
</div>
// 注册vue组件
Vue.component('prop-dom',{
     props:['info'],
     template:"<h1>{{info}}</h1>"
})
// 实例化，构建组件模板
new Vue({
     el:".prop_area"
})

结果：

    二、 prop 能够经过 v-bind 动态赋值

<div class="component_area">
    <!-- 在 HTML 中是 kebab-case 的 -->
    <register-area v-for="info in infos" v-bind:info-area="info.name"></register-area>
</div>
Vue.component('register-area',{
     // 在 JavaScript 中是 camelCase 的
     props:['infoArea'],
     template:"<div>{{infoArea}}</div>"
})
new Vue({
    el:".component_area",
    data:{
        infos:[
            {name:"展现信息1"},
            {name:"展现信息2"},
            {name:"展现信息3"}
        ]
    }
});

案例2：

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

    在上述两个示例中，咱们传入的值都是字符串类型的，但实际上任何类型的值均可以传给一个 prop

    {1}传入一个数字

<!-- 即使 `42` 是静态的，咱们仍然须要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

    {2}传入一个布尔值

<!-- 包含该 prop 没有值的状况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 即使 `false` 是静态的，咱们仍然须要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

    {3}传入一个数组

<!-- 即使数组是静态的，咱们仍然须要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

    {4}传入一个对象

<!-- 即使对象是静态的，咱们仍然须要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

    {5}传入一个对象的全部属性

    首先回顾下组件，当组件变得愈来愈复杂的时候，咱们的博文不仅须要标题和内容，还须要发布日期、评论等等。为每一个相关的信息定义一个 prop 会变得很麻烦：

<!-- 传入一个对象的全部属性 -->
<div class="obj_prop">
    <obj-prop 
        v-for="blog in blogs" 
        v-bind:name="blog.name"
        v-bind:content="blog.content"
        v-bind:author="blog.author"
    ></obj-prop>
</div>
Vue.component('obj-prop',{
    props:['name','content','author'],
    template:'\
               <div class="obj_prop_div"><h2>{{name}}</h2>\
               <p>内容为：{{content}}</p>\
               <p>做者为：{{author}}</p>\
               </div>\
             '
});
new Vue({
      el:".obj_prop",
      data:{
           blogs:[
                {name:'HTML初始',content:'主要html标签...',author:'Tony1'},
                {name:'JS初始',content:'主要JS语法...',author:'Tony2'},
           ]
      }
})

结果：

    

     是时候重构一下这个 <obj-prop> 组件了，让它变成接受一个单独的 obj prop：

<div class="obj_prop">
    <obj-prop 
        v-for="blog in blogs" 
        v-bind:blog="blog"
    ></obj-prop>
</div>
Vue.component('obj-prop',{
    props:['blog'],
    template:'\
                <div class="obj_prop_div"><h2>{{blog.name}}</h2>\
                <p>内容为：{{blog.content}}</p>\
                <p>做者为：{{blog.author}}</p>\
              </div>\
             '
});

即：

 v-bind:blog="blog"

等价于

v-bind:name="blog.name"
v-bind:content="blog.content"
v-bind:author="blog.author"

 （6）单向数据流

    全部的 prop 都使得其父子 prop 之间造成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，可是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而致使你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中全部的 prop 都将会刷新为最新的值。这意味着你不该该在一个子组件内部改变 prop。若是你这样作了，Vue 会在浏览器的控制台中发出警告。

    <!-- 单向数据流 -->
    <div class="data_flow">
        <!-- 调用为父组件，父组件改变值时子组件经过props传值也发生改动 -->
        <data-flow data="单向数据，父级组件向子组件传递"></data-flow>
    </div>
    Vue.component('data-flow',{
        // 定义时为子组件
        props:['data'],
        template:"<h1>{{data}}</h1>"
    });
    new Vue({
        el:".data_flow"
    });

结果：

    

    注意：两种常见的试图改变一个 prop 的情形（待验证）

    一、这个 prop 用来传递一个初始值；这个子组件接下来但愿将其做为一个本地的 prop 数据来使用。在这种状况下，最好定义一个本地的 data 属性并将这个 prop 用做其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

    二、这个 prop 以一种原始的值传入且须要进行转换。在这种状况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

    注意在 JavaScript 中对象和数组是经过引用传入的，因此对于一个数组或对象类型的 prop 来讲，在子组件中改变这个对象或数组自己将会影响到父组件的状态。

（7）Prop验证

    咱们能够为组件的 prop 指定验证要求，例如你知道的这些类型。若是有一个需求没有被知足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤为有帮助。为了定制 prop 的验证方式，你能够为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会经过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

demo：

    <div class="data_flow">
        <!-- 调用为父组件 -->
        <data-flow data="单向数据，父级组件向子组件传递"></data-flow>
    </div>
    Vue.component('data-flow',{
        // 定义时为子组件
        props:{data:Number},
        template:"<h1>{{data}}</h1>"
    });
    new Vue({
        el:".data_flow"
    })

    此时能够正常渲染

   

    可是查看控制台会发现报错警告

    即当 prop 验证失败的时候，(开发环境构建版本-包含完整的警告和调试模式，而生产版本删除了警告，33.30KB min+gzip) Vue 将会产生一个控制台的警告。

    注意：那些 prop 会在一个组件实例建立以前进行验证，因此实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

    ①类型验证

    type 能够是下列原生构造函数中的一个：

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

（8）非Prop特性（待验证-了解便可）

    

 

 

 

 

 

 

 

 

 

 

.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程