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教程