vue.js組件之j間的通信一子組件接受父祖件數據

時間 2020-05-05

原文原文鏈接

Vue2.0的三種經常使用傳值方式、父傳子、子傳父、非父子組件傳值

在Vue的框架開發的項目過程當中，常常會用到組件來管理不一樣的功能，有一些公共的組件會被提取出來。這時必然會產生一些疑問和需求？好比一個組件調用另外一個組件做爲本身的子組件，那麼咱們如何進行給子組件進行傳值呢？若是是電商網站系統的開發，還會涉及到購物車的選項，這時候就會涉及到非父子組件傳值的狀況。固然你也能夠用Vuex狀態管理工具來實現，這部分咱們後續會單獨介紹。我先給你們介紹Vue開發中經常使用的三種傳值方式。html

Vue經常使用的三種傳值方式有：vue

父傳子npm

子傳父app

非父子傳值
框架

組件之間的通信:函數

　　vm.$emit()工具

　　vm.$on()寫在組件裏面的網站

子組件在頁面上展現,因爲這裏採用的是h-build寫的,因此格式上並無注意:ui

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <child-com></child-com>
        </div>
        <template id="child">
            <div>
                <h2>我是子組件</h2>
            </div>
        </template>
    </body>
    <script>
        
        
        //生命週期函數,就是vue實力在某個時間點會自動執行的函數
        
        var app =new Vue({ el:"#app1", data:{ }, components:{ 'child-com':{ template:'#child' } } }) </script>
</html>

能夠看到組件在頁面上展現了,,子組件想拿到父組件的一些數據<須要經過props來:spa

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <!--組件關聯,將msg展現在頁面,最終展現值爲msg,因此須要使用msg進行傳值-->
            <child-com :msg="a">
            <!--//:msg至關於v-model進行數據綁定 -->
            </child-com>
        </div>
        <template id="child">
            <div>
                <h2>我是子組件</h2>
                <!--//在子組件中進行展現-->
                <strong>{{msg}}</strong>
            </div>
        </template>
    </body>
    <script>
        var app =new Vue({ el:"#app1", data:{ a:'我是父組件的數據' }, /*//子組件,利用props進行數據傳遞:*/ components:{ 'child-com':{ props:['msg'], template:'#child' } } }) </script>
</html>