Vue組件化開發

本文轉載自查看原文 2019-07-30 02:24 2185

一. 通過axios實現數據請求

　　1. json簡介

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

　　json的作用：在不同的系統平台，或不同編程語言之間傳遞數據。

　　1.1 json數據的語法

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

// 原生的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對象。

　　總結：

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可以用於測試開發的數據接口。

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

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

方法	參數	返回值	描述
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數據傳輸數據。

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

所以開發中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>

　　效果：

　　步驟流程圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue組件化開發 Vue組件化開發 Vue - 組件化開發 Vue組件化開發 Vue 組件化開發 vue組件化開發實踐 Vue 組件化開發之插槽 Vue.js組件化開發實踐 Vue前端單頁面框架，組件化開發 vue組件化開發組件拆分原則是什么