EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒體服務器web前端：vue組件之間的傳值，父組件向子組件傳值

前端方面，EasyDSS流媒體服務器與EasyNVR有着根本的不一樣。EasyNVR使用的是傳統的js來進行開發,而EasyDSS使用的是webpack+vue來進行開發的,瞭解vue+webpack的應該都知道它的好處。迴歸正題，組件的傳值問題。

vue中對組件的定義：組件 (Component) 是 Vue.js 最強大的功能之一。 組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器爲它添加特殊功能。在有些情境下，組件也可表現爲用 is 特性進行了擴展的原生 HTML 元素。

以EasyDSS前端爲基礎來實現傳值：

父組件傳給子組件

• 在子組件中使用 Prop 傳遞數據
• props：監聽父組件傳過來的值，不監聽，不會在子組件中使用（以對象形式來記錄）；
• 上代碼更直觀：

父組件代碼

<div class="video-window window3" id="3" @click="getAlt($event,3)" style="cursor:pointer">
                <div class="message">
                    <i class="fa fa-history" aria-hidden="true"></i>
                    啓動播放器
                </div>
                <VideoJS :videoUrl="videoUrl3" live></VideoJS>    
    //向子組件中傳遞videoUrl這個值，videoUrl的內容就是」videoUrl3「   
            </div>

子組件代碼

props: {
        videoUrl: {
            default: ""
        },
    },
    computed: {
        videoType() {
            let _type = "application/x-mpegURL";
            if (this.rtmp) {
                _type = "rtmp/mp4";
            }
            return _type;
        },
        rtmp() {
            return (this.src || "").indexOf("rtmp") == 0;
        },
     },

在子組件中進行監聽來，使用父組件傳遞過來的videoUrl這個值

src() {
                if (!this.videoUrl) {
                    return "";
                }
                if (this.videoUrl.indexOf("/") === 0) {
                    return location.protocol + "//" + location.host + this.videoUrl;
                }
                return this.videoUrl;
            },

由於在父組件中已經賦值，全部能夠直接用this.XX

videoHtml() {
               return `
                    <video class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%; height: 100%;" controls preload="none" poster="${this.snapUrl}">
                        <source src="${this.src}" type="${this.videoType}"></source>    / /使用處理好的數據
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_blank">
                                supports HTML5 video
                            </a>
                        </p>
                    </video>            
                `;
            }
        },

//在src 中對父組件中傳遞過來的videoUrl進行處理，來獲得本身想要的數據；

以實例來分析：

• EasyDSS前端是將videojs播放器寫成一個組件，這裏的四分屏就是以「v-for」調用組件。
• 該外部的組件現對於videojs組件就是一個父組件，videojs則祥地來講就是一個子組件。

• 實現的效果就是將頁面中的父組件中的值傳到videojs子組件中來完成播放的功能。

• 完成效果：

備註：咱們的官網實現的是自動播放當前直播列表中的全部實時流。該篇博客說明的是以easydss爲基礎來進行的選擇性播放。後續會講解如何選擇對應播放器來播放對應的實時視頻流以及子組件是如何向父組件來進行傳值的。

關於EasyDSS流媒體服務器

EasyDSS商用流媒體服務器解決方案是一套集流媒體點播、轉碼與管理、直播、錄像、檢索、時移回看於一體的一套完整的商用流媒體服務器解決方案，EasyDSS高性能RTMP流媒體服務器支持RTMP推流，同步輸出HTTP、RTMP、HLS、HTTP-FLV，支持推流分發/拉流分發，支持秒開、GOP緩衝、錄像、檢索、回放、錄像下載、網頁管理等多種功能，是目前市面上最合理的一款商用流媒體服務器！

詳細說明：http://www.easydss.com/