【Vue.js 牛刀小試】：第九章 - 組件基礎再探（data、props）

系列目錄地址

• 1、基礎知識概覽
  • 第一章 - 一些基礎概念（posted at 2018-10-31）
  • 第二章 - 常見的指令的使用（posted at 2018-11-01）
  • 第三章 - 事件修飾符的使用（posted at 2018-11-02）
  • 第四章 - 頁面元素樣式的設定（posted at 2018-11-05）
  • 第五章 - 計算屬性與監聽器（posted at 2018-11-08）
  • 第六章 - 按鍵修飾符的使用（posted at 2018-11-15）
  • 第七章 - Vue 實例的生命週期（posted at 2018-12-13）
• 2、深刻了解 Vue
  • 第八章 - 組件的基礎知識（posted at 2019-01-03）
  • 第九章 - 組件基礎再探（data、props）（posted at 2019-03-09）

前言

        在上一章的學習中，咱們學習了 Vue 中組件的基礎知識，知道了什麼是組件，以及如何建立一個全局/局部組件。不知道你是否記得，在上一章中，咱們提到組件是一個能夠複用的 Vue 實例，它與 Vue 實例也只是擁有些許的差別。本章，咱們將繼續學習組件的相關基礎知識，瞭解 Vue 的組件中的 data、prop 選項的使用。

        倉儲地址：Chapter02-Bronze Component Advance

乾貨合集

        1、 組件中的 data 選項

        當一個 Vue 實例被建立以後，實例中的 data 選項的屬性值就與頁面的視圖作了一個「綁定」，當咱們修改 data 中的屬性值時，視圖就會產生「響應」，同時，頁面上使用到屬性值的地方也會同步更新。那麼，組件做爲一個特殊的 Vue 實例，對於 data 選項的使用上是否是和在 Vue 實例中的使用方式相同呢。

        首先，咱們仍是先建立一個全局組件，按照 Vue 實例中使用 data 選項的使用方法，將 data 選項添加到組件的定義中，同時，使用插值表達式在頁面中顯示出屬性值，示例代碼以下。

<div id="app">
    <tmpl></tmpl>
</div>

<template id="tmpl">
    <div>
        <h3>這是全局組件，啊啊啊啊啊啊</h3>
        <h4>{{name}}</h4>
    </div>
</template>

<script> Vue.component('tmpl', { template: '#tmpl', data: { name: 'zhangsan' } }); var vm = new Vue({ el: '#app', data: {} }); </script>
複製代碼

        運行咱們的代碼，發現頁面上並無顯示出數據，看下控制檯，嗯，報錯了。咱們一條條的看報錯信息。

        第一條報錯信息，在建立組件實例中的 data 選項時，返回的應該是一個實例對象的方法。什麼意思呢？回想一下咱們在建立 Vue 實例時添加 data 選項，咱們建立的是一個 data 對象，而根據控制檯的報錯信息提示，當咱們在組件中使用 data 選項時，咱們須要返回包含實例對象的方法，咱們能夠按照這個提示修改試試。

<script> Vue.component('tmpl', { template: '#tmpl', data: function () { return { name: 'zhangsan' } } }); </script>
複製代碼

        能夠看到，在組件的 data 選項中，咱們將 data 選項定義成一個方法，並在這個方法中返回了一個對象實例，此時，刷新頁面，能夠看到兩條錯誤信息已經都不見了，頁面也已經能夠正常顯示出數據。

        爲何會這樣呢，查看 Vue 的官方文檔後，咱們能夠找到這樣一句解釋：一個組件的 data 選項必須是一個函數，所以每一個實例能夠維護一份被返回對象的獨立的拷貝。

        返回對象的獨立的拷貝，再聯繫上面報錯信息提到的，在方法中返回對象實例，是否是說，當咱們在方法中返回的是一個定義好的對象，會出問題呢？

        咱們來繼續試試。這裏，咱們將在 data 選項中返回的對象改爲在外部定義，同時，屢次調用這個組件，完整的示例代碼以下。

<div id="app">
    <counter></counter>
    <hr />
    <counter></counter>
</div>

<template id="counter">
    <div>
        <button @click="add"> Add </button>
        <h3>count：{{count}}</h3>
    </div>
</template>

<script> var dataObj = { count: 0 } Vue.component('counter', { template: '#counter', data: function () { return dataObj }, methods: { add() { dataObj.count++ } }, }) var vm = new Vue({ el: '#app', data: {} }); </script>
複製代碼

        能夠看到，由於咱們在 data 中返回的對象並非一個新的對象實例，當咱們修改返回對象中的屬性值時，全部使用到當前組件的地方都會發生變動，這無疑是沒法接受的。所以，爲了不這一狀況，當咱們須要在建立組件時須要添加 data 選項，咱們須要在 data 方法中返回對象實例，而不是一個已經定義好的對象。

        2、 組件中的 props 選項

        組件的 Props 選項是咱們能夠在組件上註冊的一些自定義特性，當咱們將一個值傳遞給一個 props 選項中的特性時，那個 prop 特性就變成了組件實例的一個屬性，這時候，咱們固然就能夠獲取到這個值了，所以，組件中的 props 常常用於將咱們的父組件值傳遞到子組件或是將 Vue 實例中的屬性值傳遞到組件中使用。

        在父組件/Vue實例引用子組件的時候，經過屬性綁定的方式（v-bind），將須要傳遞給子組件的數據進行傳遞，從而在子組件內部，經過綁定的屬性值獲取到父組件/Vue實例的數據。

        例如，在下面的代碼中，我在 Vue 實例中定義了一個局部組件，將實例的 title 屬性綁定到組件的 parenttitle 屬性上，同時，將 parenttitle 屬性賦值給組件的 content 屬性，從下面的代碼中不難看出，咱們但願的是能夠實時獲取到父組件的 title 屬性值。

        PS：這裏和以前定義組件名稱同樣，由於在 HTML 中，對於大小寫是不敏感的，所以，若是這裏你採用了 camelCase (駝峯命名法) ，在使用時，依然須要將屬性名稱用其等價的 kebab-case (短橫線分隔命名) 來指明。

<div id="app">
    <h4>
        請輸入須要傳遞給子組件的值：<input type="text" v-model="title" />
    </h4>
    <child-node v-bind:parenttitle="title"></child-node>
</div>

<template id="child">
    <div>
        <h4>Vue 實例中的屬性值爲：{{content}}</h4>
    </div>
</template>

<script> var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } } } }, }); </script>
複製代碼

        能夠看到，結果彷佛和咱們想的不同，雖然能夠在綁定的 parenttitle 屬性上實時獲取到 Vue 實例的屬性值，但是，這裏卻沒法同步更新組件的 content 屬性。仔細分析下能夠咱們就不難看出，組件的 data 選項中的 content 屬性是一個 String 類型的變量，也就是 js 中的基本數據類型，在建立時就已經將數據值寫入到內存棧中，以後與初始賦值的數據就沒有任何的關係，所以，後面對於 Vue 實例的 title 屬性的任何變動，都不會引發對於實例 content 屬性的變化。

        所以，若是咱們想完成最開始的需求的話，有兩種可行的解決辦法：

        一、將 Vue 實例中的 title 屬性改成一個對象，輸入的值做爲對象中的一個屬性，所以，咱們在實例中綁定的 parenttitle 也將爲一個對象。由於 js 中的對象爲引用類型，賦值時，是將存儲數據的地址進行拷貝，所以，title 對象和 parenttitle 對象將指向同一地址，這時，任何對於 title 對象的屬性值的修改，都會引發 parenttitle 對象中屬性值得改變。

        二、採起 watch 監聽 parenttitle 的方式來同步更新實例的 content 屬性。

        這裏，我採用第二種方式，使用 watch 監聽器來同步變動組件中的 content 屬性值，修改代碼以下。

<script> var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } }, watch: { parenttitle() { this.content = this.parenttitle } }, } }, }); </script>
複製代碼

        既然能夠將 Vue 實例的數據傳遞到子組件中進行使用，那麼，咱們是否是能夠在子組件進行修改綁定的屬性值，從而影響到 Vue 實例呢？咱們來繼續嘗試。

        在上面的實例代碼的基礎上，咱們爲子組件的 h4 標籤添加一個點擊事件 change，經過 change 事件，咱們來修改綁定的屬性值 parenttitle，看看會不會形成對於 Vue 實例中的 title 屬性的影響。

<div id="app">
    <h4>
        請輸入須要傳遞給子組件的值：<input type="text" v-model="title" />
    </h4>
    <child-node v-bind:parenttitle="title"></child-node>
</div>

<template id="child">
    <div>
        <h4 @click="change">Vue 實例中的屬性值爲：{{content}}</h4>
    </div>
</template>

<script> var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } }, watch: { parenttitle() { this.content = this.parenttitle } }, methods: { change() { this.parenttitle = '9999999999999' } } } }, }); </script>
複製代碼

        能夠看到，咱們雖然修改了組件的 parenttitle 屬性值，卻沒有影響到 Vue 實例中的 title 屬性，因此咱們能夠得出，全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，可是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而致使你的應用的數據流向難以理解。

總結

        本章，主要是介紹了咱們如何在組件中使用 data 選項和 props 選項，以及在使用過程當中一些與 Vue 實例中使用方式不一樣的地方，同時，介紹瞭如何將父組件中的屬性值傳遞到子組件中。既然父組件能夠將屬性值傳遞到子組件中，毫無疑問，咱們也能夠將子組件的屬性傳遞到父組件中，父子組件之間進行屬性傳遞的方式，我將放在下一章中進行介紹。

參考

        一、Vue.js——60分鐘組件快速入門（上篇）

        二、認識Vue組件

        三、Vue 2.0學習筆記：組件的使用

        四、初學vue2.0-組件-文檔理解筆記v1.0

        五、Vue組件選項props

佔坑

        做者：墨墨墨墨小宇
        我的簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程序員，槍手死忠，喵星人。於2016年12月開始.NET程序員生涯，微軟.NET技術的堅決堅持者，立志成爲雲養貓的少年中面向谷歌編程最厲害的.NET程序員。
        我的博客：yuiter.com
        博客園博客：www.cnblogs.com/danvic712