Vue組件化開發

時間 2019-11-09

標籤 vue 組件開發简体版

原文原文鏈接

一. 經過axios實現數據請求

　　1. json簡介

　　json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裏說的json指的是相似於javascript對象的一種數據格式。javascript

　　json的做用：在不一樣的系統平臺，或不一樣編程語言之間傳遞數據。css

　　1.1 json數據的語法

　　json數據對象相似於JavaScript中的對象，可是它的鍵對應的值裏面是沒有函數方法的，值能夠是普通變量，不支持undefined，值還能夠是數組或者json對象。html

// 原生的js的json對象
var obj = {
  age:10,
  sex: '女',
  work:function(){
    return "好好學習",
  }
}

// json數據的對象格式,json數據格式,是沒有方法的,只有屬性：
{
    "name":"tom",
    "age":18
}

// json數據的數組格式：
["tom",18,"programmer"]

　　複雜的json格式數據能夠包含對象和數組的寫法。前端

{
  "name":"小明",
  "age":200,
  "is_delete": false,
  "fav":["code","eat","swim","read"],
  "son":{
    "name":"小小明",
    "age":100,
    "lve":["code","eat"]
  }
}

// 數組結構也能夠做爲json傳輸數據。

　　json數據能夠保存在.json文件中，通常裏面就只有一個json對象。vue

　　總結：java

1. json文件的後綴是.json
2. json文件通常保存一個單一的json數據
3. json數據的屬性不能是方法或者undefined，屬性值只能：數值[整數,小數,布爾值]、字符串、json和數組
4. json數據只使用雙引號、每個屬性成員之間使用逗號隔開，而且最後一個成員沒有逗號。
   {
      "name":"小明",
      "age":200,
      "fav":["code","eat","swim","read"],
      "son":{
        "name":"小小明",
        "age":100
      }
    }

　　工具：postman能夠用於測試開發的數據接口。node

　　1.2 js中提供的json數據轉換方法

　　javascript提供了一個JSON對象來操做json數據的數據轉換.python

方法	參數	返回值	描述
stringify	json對象	字符串	json對象轉成字符串
parse	字符串	json對象	字符串格式的json數據轉成json對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // json語法
    let emp = {
        "username":"xiaohui",
        "password":"1234567",
        "age":20
    };

    console.log(emp);
    console.log(typeof emp);

    // JSON對象提供對json格式數據的轉換功能
    // stringify(json對象)  # 用於把json轉換成字符串
    let result = JSON.stringify(emp);
    console.log(result);
    console.log(typeof result);

    // parse(字符串類型的json數據)  # 用於把字符串轉成json對象
    let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
    console.log(json_str);
    console.log(typeof json_str);

    let json_obj = JSON.parse(json_str);
    console.log(json_obj);
    console.log(typeof json_obj);

    console.log(json_obj.age)
</script>
</body>
</html>

　　2. ajax簡介

　　ajax，通常中文稱之爲："阿賈克斯"，是英文「Async Javascript And Xml」的簡寫，譯做：異步js和xml數據傳輸數據。jquery

ajax的做用： ajax可讓js代替瀏覽器向後端程序發送http請求，與後端通訊，在用戶不知道的狀況下操做數據和信息，從而實現頁面局部刷新數據/無刷新更新數據。webpack

因此開發中ajax是很經常使用的技術，主要用於操做後端提供的數據接口，從而實現網站的先後端分離。

ajax技術的原理是實例化js的XMLHttpRequest對象，使用此對象提供的內置方法就能夠與後端進行數據通訊。

　　2.1 ajax的使用

　　ajax的使用必須與服務端程序配合使用，可是目前咱們先學習ajax的使用，因此暫時先不涉及到服務端python代碼的編寫。所以，咱們可使用別人寫好的數據接口進行調用。

　　jQuery將ajax封裝成了一個函數$.ajax()，咱們能夠直接用這個函數來執行ajax請求。

接口	地址
天氣接口	http://wthrcdn.etouch.cn/weather_mini?city=城市名稱
音樂接口搜索	http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲標題
音樂信息接口	http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音樂ID

　　jQuery版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<button id="btn">點擊獲取數據</button>
<script>
    $("#btn").click(function(){
        $.ajax({
            // 後端程序的url地址
            url: 'http://wthrcdn.etouch.cn/weather_mini',
            // 也可使用method，提交數據的方式，默認是'GET'，經常使用的還有'POST'
            type: 'get',
            dataType: 'json',  // 返回的數據格式，經常使用的有是'json','html',"jsonp"
            data:{ // 設置發送給服務器的數據，若是是get請求，也能夠寫在url地址的?後面
                "city":'深圳'
            }
        })
        .done(function(resp) {     // 請求成功之後的操做
            console.log(resp);
        })
        .fail(function(error) {    // 請求失敗之後的操做
            console.log(error);
        });
    });
</script>
</body>
</html>

　　vue.js默認沒有提供ajax功能的。

　　因此使用vue的時候，通常都會使用axios的插件來實現ajax與後端服務器的數據交互。

　　注意，axios本質上就是javascript的ajax封裝，因此會被同源策略限制。

　　axios的下載地址：

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

　　axios提供發送請求的經常使用方法有兩個：axios.get() 和 axios.post() 。

    // 發送get請求
    // 參數1: 必填，字符串，請求的數據接口的url地址，例如請求地址：http://www.baidu.com?id=200
    // 參數2：可選，json對象，要提供給數據接口的參數
    // 參數3：可選，json對象，請求頭信息
    axios.get('服務器的資源地址',{ // http://www.baidu.com
        params:{
            參數名:'參數值', // id: 200,
        }
    
    }).then(function (response) { // 請求成功之後的回調函數
            console.log("請求成功");
            console.log(response.data); // 獲取服務端提供的數據
    
    }).catch(function (error) {   // 請求失敗之後的回調函數
            console.log("請求失敗");
            console.log(error.response);  // 獲取錯誤信息
    });

    // 發送post請求，參數和使用和axios.get()同樣。
    // 參數1: 必填，字符串，請求的數據接口的url地址
    // 參數2：必填，json對象，要提供給數據接口的參數,若是沒有參數，則必須使用{}
    // 參數3：可選，json對象，請求頭信息
    axios.post('服務器的資源地址',{
        username: 'xiaoming',
        password: '123456'
    },{
        responseData:"json",
    })
    .then(function (response) { // 請求成功之後的回調函數
      console.log(response);
    })
    .catch(function (error) {   // 請求失敗之後的回調函數
      console.log(error);
    });

　　Vue版本獲取天氣信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <button id="btn" @click="get_weather">點擊獲取天氣</button>
    <p>{{weather_info}}</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            weather_info: {},
        },
        methods: {
            get_weather(){
                // 獲取天氣接口
                // axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳"
                axios.get("http://wthrcdn.etouch.cn/weather_mini", {
                    // get請求的附帶參數
                    params: {
                        "city": "深圳",
                    }
                }).then(response=>{
                    console.log(response.data);  // 獲取接口數據
                    this.weather_info = response.data;
                }).catch(error=>{
                    console.log(error.response);  // 獲取錯誤信息
                })
            }
        }
    })
</script>
</body>
</html>

　　3. 同源策略

　　同源策略，是瀏覽器爲了保護用戶信息安全的一種安全機制。所謂的同源就是指代通訊的兩個地址（例如服務端接口地址與瀏覽器客戶端頁面地址）之間比較，協議、域名(IP)和端口是否相同。不一樣源的客戶端腳本[javascript]在沒有明確受權的狀況下，沒有權限讀寫對方信息。

　　ajax本質上仍是javascript，是運行在瀏覽器中的腳本語言，因此會被受到瀏覽器的同源策略所限制。

前端地址：http://www.oldboy.cn/index.html	是否同源	緣由
http://www.oldboy.cn/user/login.html	是	協議、域名、端口相同
http://www.oldboy.cn/about.html	是	協議、域名、端口相同
https://www.oldboy.cn/user/login.html	否	協議不一樣 ( https和http )
http:/www.oldboy.cn:5000/user/login.html	否	端口不一樣( 5000和80)
http://bbs.oldboy.cn/user/login.html	否	域名不一樣 ( bbs和www )

　　同源策略針對ajax的攔截，代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <button id="btn" @click="get_music">搜索音樂</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            get_music(){
                axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=葉問宗師"
                ).then(response=>{
                    console.log(response.data);
                }).catch(error=>{
                    alert("出錯了！");
                    console.log(error.response);
                })
            }
        }
    })
</script>
</body>
</html>

　　上面代碼運行錯誤以下：

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E5%8F%B6%E9%97%AE%E5%AE%97%E5%B8%88' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

　　上面錯誤，關鍵詞：Access-Control-Allow-Origin

　　只要出現這個關鍵詞，就是訪問受限。出現同源策略的攔截問題。

　　3.1 ajax跨域（跨源）方案之CORS

　　ajax跨域(跨源)方案：後端受權[CORS]，jsonp，服務端代理

　　CORS是一個W3C標準，全稱是"跨域資源共享"，它容許瀏覽器向跨源的後端服務器發出ajax請求，從而克服了AJAX只能同源使用的限制。

　　實現CORS主要依靠後端服務器中響應數據中設置響應頭信息返回的。

# django的視圖

def post(request):

    response = Response()

    response["Access-Control-Allow-Origin"] = "http://localhost:63342"

    return response

// 在響應行信息裏面設置如下內容：
Access-Control-Allow-Origin: ajax所在的域名地址

Access-Control-Allow-Origin: www.oldboy.cn  # 表示只容許www.oldboy.cn域名的客戶端的ajax跨域訪問

// * 表示任意源，表示容許任意源下的客戶端的ajax均可以訪問當前服務端信息
Access-Control-Allow-Origin: *

　　jsonp咱們經過代碼瞭解一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>嚴格來講：jsonp不是ajax技術，採用了script標籤的加載跨域腳本的方式避開了同源策略</p>
    <p>jsonp技術的實現，是依靠服務端和瀏覽器端雙方配合的</p>
    <p>api地址：https://suggest.taobao.com/sug?code=utf-8&q=商品名稱&callback=cb</p>
    <button id="btn">點擊搜索</button>

    <script>
        function hello(data) {
            console.log(data);
            alert(data.result);
        }

        let btn = document.getElementById("btn");
        btn.onclick = function () {
            // 1. 建立一個script標籤
            script = document.createElement("script");
            // 2. 把script的src屬性，設置爲後端api的接口地址，並且後端接口返回的數據必須是js代碼，
            // 這個代碼中，必須調用一個客戶端已經提早聲明的函數。
            script.src = "https://suggest.taobao.com/sug?code=utf-8&q=詠春&callback=hello";
            document.head.appendChild(script);
        }
    </script>
</body>
</html>

　　總結：

0. 同源策略：瀏覽器的一種保護用戶數據的一種安全機制。
   瀏覽器會限制ajax不能跨源訪問其餘源的數據地址。
   同源：判斷兩個通訊的地址之間，是否協議，域名[IP]，端口一致。
   
   ajax：  http://127.0.0.1/index.html
   api數據接口：  http://localhost/index
   
   這兩個是同源麼？不是同源的。是否同源的判斷依據不會根據電腦來判斷，而是經過協議、域名、端口的字符串是否來判斷。
   
1. ajax默認狀況下會受到同源策略的影響，一旦受到影響會報錯誤以下：
     No 'Access-Control-Allow-Origin' header is present on the requested resource

2. 解決ajax只能同源訪問數據接口的方式：
   1. CORS，跨域資源共享，在服務端的響應行中設置：
      Access-Control-Allow-Origin: 容許訪問的域名地址
   2. jsonp
   3. 是否服務端代理
      思路：經過python來請求對應的服務器接口，獲取到數據之後

二. 組件化開發

　　組件（Component）是自定義封裝的功能。在前端開發過程當中，常常出現多個網頁的功能是重複的，並且不少不一樣的頁面之間，也存在一樣的功能。

　　而在網頁中實現一個功能，須要使用html定義功能的內容結構，使用css聲明功能的外觀樣式，還要使用js來定義功能的特效，所以就產生了把一個功能相關的[HTML、css和javascript]代碼封裝在一塊兒組成一個總體的代碼塊封裝模式，咱們稱之爲「組件」。

　　因此，組件就是一個html網頁中的功能，通常就是一個標籤，標籤中有本身的html內容結構，css樣式和js特效。

　　這樣，前端人員就能夠在組件化開發時，只須要書寫一次代碼，隨處引入便可使用。

　　vue的組件有兩種：默認組件[全局組件] 和單文件組件

　　1. 默認組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
    <style>
        .title{
            color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <myheader></myheader>
</div>
<script>

    // 1. 聲明默認組件 Vue.component
    /*
    * 組件名稱：不要大寫，也不要和原生的HTML標籤同名，更不要任意使用特殊的符號
    * Vue.component("組件名稱", {
    *     template: "html代碼",  // 組件的HTML結構代碼
    *     data(){
    *         return {}
    *     },
    *     methods: {  // 組件的相關的js方法
    *         方法名(){
    *             // 邏輯代碼
    *         }
    *     }
    * }
    * */
    // `` 是js的多行字符串
    // 組件裏面的data的值，必須是一個匿名函數，函數的返回值必須是一個json對象
    Vue.component('myheader', {
        template: `<div>頭部組件的HTML代碼<h2 @click="demo" :class="className">{{message}}</h2></div>`,
        data(){
            return {
                "message": "hello, 我是組件裏面的data數據",
                "className": "title"
            }
        },
        methods: {
            demo(){
                alert('你好！')
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data: {

        }
    })
</script>
</body>
</html>

　　效果：

三. Vue自動化工具（Vue-cli）

　　前面學習了普通組件之後，接下來咱們繼續學習單文件組件則須要提早先安裝準備一些組件開發工具。不然沒法使用和學習單文件組件。

　　通常狀況下，單文件組件，咱們運行在自動化工具vue-CLI中，能夠幫咱們編譯單文件組件。因此咱們須要在系統中先搭建vue-CLI工具，

　　官網：https://cli.vuejs.org/zh/

　　Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本。

　　nvm工具的下載和安裝： https://www.jianshu.com/p/d0e0935b150a

　　　　　　　　　　　　　https://www.jianshu.com/p/622ad36ee020

　　1. 安裝node.js

　　Node.js是一個新的後端(後臺)語言，它的語法和JavaScript相似，因此能夠說它是屬於前端的後端語言，後端語言和前端語言的區別：

- 運行環境：後端語言通常運行在服務器端，前端語言運行在客戶端的瀏覽器上
- 功能：後端語言能夠操做文件，能夠讀寫數據庫，前端語言不能操做文件，不能讀寫數據庫。

　　咱們通常安裝LTS(長線支持版本 Long-Time Support)：

　　下載地址：https://nodejs.org/en/download/【上面已經安裝了nvm，那麼這裏不用手動安裝了】

　　node.js的版本有兩大分支：

　　官方發佈的node.js版本：0.xx.xx 這種版本號就是官方發佈的版本

　　社區發佈的node.js版本：xx.xx.x 就是社區開發的版本

　　Node.js若是安裝成功，能夠查看Node.js的版本,在終端輸入以下命令：

node -v

　　2. npm

　　在安裝node.js完成後，在node.js中會同時幫咱們安裝一個npm包管理器npm。咱們能夠藉助npm命令來安裝node.js的包。這個工具至關於python的pip管理器。

npm install -g 包名              # 安裝模塊   -g表示全局安裝，若是沒有-g，則表示在當前項目安裝
npm list                        # 查看當前目錄下已安裝的node包
npm view 包名 engines            # 查看包所依賴的Node的版本 
npm outdated                    # 檢查包是否已通過時，命令會列出全部已過期的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸載node包
npm 命令 -h                      # 查看指定命令的幫助文檔

　　3. 安裝Vue-cli

npm install -g vue-cli

　　4. 使用Vue-cli初始化建立前端項目

　　使用vue自動化工具能夠快速搭建單頁應用項目目錄。

　　該工具爲現代化的前端開發工做流提供了開箱即用的構建配置。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。

　　生成一個基於 webpack 模板的新項目：

vue init webpack 項目目錄名

例如：
vue init webpack com

　　而後啓動vue項目

cd com   # 切換到項目目錄下
npm run dev   # 啓動node提供的測試http服務器

　　運行了上面代碼之後,終端下會出現如下效果提示

　　瀏覽器訪問：http://localhost:8080

　　5. 項目目錄結構

　　src：主開發目錄，要開發的單文件組件所有在這個目錄下的components目錄下

　　static：靜態資源目錄，全部的css，js文件放在這個文件夾

　　dist：項目打包發佈文件夾，最後要上線單文件項目文件都在這個文件夾中[後面打包項目,讓項目中的vue組件通過編譯變成js 代碼之後,dist就出現了]

　　node_modules：目錄是node的包目錄，

　　config：是配置目錄，

　　build：是項目打包時依賴的目錄

　　src/router：路由,後面須要咱們在使用Router路由的時候,本身聲明.

　　6. 項目執行流程圖

　　整個項目是一個主文件index.html,index.html中會引入src文件夾中的main.js,main.js中會導入頂級單文件組件App.vue,App.vue中會經過組件嵌套或者路由來引用components文件夾中的其餘單文件組件。

四. 單文件組件的使用

　　組件有兩種：普通組件、單文件組件

　　普通組件的缺點：

html代碼是做爲js的字符串進行編寫，因此組裝和開發的時候不易理解，並且沒有高亮效果。
普通組件用在小項目中很是合適，可是複雜的大項目中，若是把更多的組件放在html文件中，那麼維護成本就會變得很是昂貴。
普通組件只是整合了js和html，可是css代碼被剝離出去了。使用的時候的時候很差處理。

　　將一個組件相關的html結構，css樣式，以及交互的JavaScript代碼從html文件中剝離出來，合成一個文件，這種文件就是單文件組件，至關於一個組件具備告終構、表現和行爲的完整功能，方便組件之間隨意組合以及組件的重用，這種文件的擴展名爲「.vue」，好比："Home.vue"。

　　1. 建立組件

　　在src目錄下的components目錄下新建一個Home.vue文件。

　　Home.vue文件主要包含三大塊內容

　　完成案例-點擊加減數字

　　Home.vue文件：

<template>
    <div id="Home">
      <span @click="num--">-</span>
      <input type="text" size="1" v-model="num">
      <span @click="num++">+</span>
    </div>
</template>

<script>
  // 暴露對象
  export default {
    name: "Home",  // 組件名稱
    data(){
      return {
        num: 0,
      }
    },
    components: {
    }
  }
</script>

<style>
  span{
    font-size: 30px
  }
</style>

　　在App.vue組件中調用上面的組件

<template>
  <div id="app">
    <Home></Home>
  </div>
</template>

<script>
import Home from './components/Home'

export default {
  name: 'App',
  components: {  // 子組件集合
    Home
  }
}
</script>

<style>
  span{
    border: 2px solid red;
  }
</style>

　　在開發vue項目以前，須要手動把 App.vue的HelloWorld組件代碼以及默認的css樣式清除。

　　上面的代碼效果：

　　2. 組件的嵌套

　　有時候開發vue項目時,頁面也能夠算是一個大組件,同時頁面也能夠分紅多個子組件.

　　由於,產生了父組件調用子組件的狀況.

　　例如,咱們能夠聲明一個組件,做爲父組件

　　在components/建立一個保存子組件的目錄common，並建立一個Header.vue文件。

　　Header.vue文件：

// 組件中代碼必須寫在同一個標籤中
<template>
    <div>
      公共頭部
      <p>{{message}}</p>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
          return {
            message: "頭部組件的data數據"
          }
        }
    }
</script>

<style>
  p{
    color: red;
  }
</style>

　　而後，在父組件中調用上面聲明的子組件

<template>
    <div id="Home">
      <!--使用子組件-->
      <HeaderCommon></HeaderCommon>
      我是Home組件的template內容
      <span @click="num--">-</span>
      <input type="text" size="1" v-model="num">
      <span @click="num++">+</span>
    </div>
</template>

<script>
  // 導入子組件
  import HeaderCommon from './common/Header'
  // 暴露對象
  export default {
    name: "Home",  // 組件名稱
    data(){
      return {
        num: 0,
      }
    },
    components: {  // 註冊子組件
      HeaderCommon,
    }
  }
</script>

<style>
  span{
    font-size: 30px
  }

</style>

　　最後,父組件被App.vue調用.就能夠看到頁面效果.

<template>
  <div id="app">
    <Home></Home>
  </div>
</template>

<script>
import Home from './components/Home'

export default {
  name: 'App',
  components: {  // 子組件集合
    Home
  }
}
</script>

<style>
  span{
    border: 2px solid red;
  }
</style>

　　效果：

五. 傳遞數據

　　1. 父組件的數據傳遞給子組件

　　例如,咱們但願把父組件的數據傳遞給子組件.

　　能夠經過props屬性來進行數據傳遞.

　　父傳子傳遞數據三個步驟：

　　　　1. 在父組件中，調用子組件的組名處，使用屬性值的方式往下傳遞數據

<HeaderCommon :fnum="num" title="Home裏面寫的數據"></HeaderCommon>

上面表示在父組件調用Menu子組件的時候傳遞了2個數據：
  若是要傳遞變量[變量能夠各類類型的數據]，屬性名左邊必須加上冒號:，同時，屬性名是自定義的，會在子組件中使用。
  若是要傳遞普通字符串數據，則不須要加上冒號:

　　　　2. 在子組件中接受上面父組件傳遞的數據，須要在vm組件對象中，使用props屬性類接受。

<script>
    export default {
        name: "Header",
        data(){
          return {
            message: "頭部組件的data數據"
          }
        },
      props: [
        "fnum",
        'title'
      ]
    }
</script>

　　　　3. 在子組件中的template中使用父組件傳遞過來的數據.

<template>
    <div>
      公共頭部
      <p>{{message}}</p>
      <p>父組件傳過來的fnum：{{fnum}}</p>
      <p>父組件傳過來的title：{{title}}</p>
    </div>
</template>

　　效果：

　　步驟流程圖：

　　使用父組件傳遞數據給子組件時, 注意一下幾點:

傳遞數據是變量,則須要在屬性左邊添加冒號.

傳遞數據是變量,這種數據稱之爲"動態數據傳遞"

傳遞數據不是變量,這種數據稱之爲"靜態數據傳遞"
父組件中修改了數據,在子組件中會被同步修改,可是,子組件中的數據修改了,是不會影響到父組件中的數據.

這種狀況,在開發時,也被稱爲"單向數據流"

　　2. 子組件傳遞數據給父組件

　　子傳父傳遞數據步驟：

　　1. 在子組件中，經過 this.$emit() 來調用父組件中定義的事件

<script>
    export default {
        name: "Header",
        data(){
          return {
            message: "頭部組件的data數據"
          }
        },
        props: [
          "fnum",
          'title'
        ],
        watch: {
          fnum(){
            console.log(this.fnum);
            // this.$emit("父元素的自定義事件","要傳遞的數據");  // 經過this.$emit()方法，子組件能夠把數據傳遞給父組件
            this.$emit("PostParentData", this.fnum);
          }
        }
    }
</script>

　　2. 父組件中聲明一個和子組件 this.$emit("自定義事件名稱") 對應的事件屬性。

<template>
    <div id="Home">
      <!--使用子組件-->
      <HeaderCommon @PostParentData="GetSonData" :fnum="num" title="Home裏面寫的數據"></HeaderCommon>
      我是Home組件的template內容
      <span @click="num--">-</span>
      <input type="text" size="1" v-model="num">
      <span @click="num++">+</span>
    </div>
</template>

　　3. 父組件中，聲明的自定義方法，在事件被調用時執行。

<script>
  // 導入子組件
  import HeaderCommon from './common/Header'
  // 暴露對象
  export default {
    name: "Home",  // 組件名稱
    data(){
      return {
        num: 0,
      }
    },
    components: {  // 註冊子組件
      HeaderCommon,
    },
    methods: {
      GetSonData(message){
        console.log(message);
        this.num = message;
      }
    }
  }
</script>