Vue學習Day05-Vue中組件間的通信(父到子,子到父,兄弟間)

時間 2019-11-30

標籤 vue 學習 day05 day 組件通信兄弟简体版

原文原文鏈接

--------------------如下是那種通信方式是剛剛開始學習vue組件通信學習的方法------------------vue

如下是學習筆記:app

1.組件間的關係函數

組件vue.js最強大的功能之一,而組件實例的做用域是相互獨立的,這就是各類組件之間的數據是沒法相互引用的,通常來講組件能夠有如下幾種關係:學習

如圖所示,A和B,B和C,B和D都是父子關係,C和D是兄弟關係this

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

①子組件的屬性和父組件的數據綁定code

②子組件經過props存放與父組件綁定數據的屬性.component

①綁定
<div id="app">
<child :dilevery="msg"></child><!--msg是父組件中數據-->
</div>
-------
②存放並使用
components:{
child:{
template:"<div>我是子組件我接受到的數據是--{{dilevery}}</div>",  

props:["dilervery"]
}

3.子組件將數據傳遞給父組件.blog

①父組件提供一個方法(將傳過來的data做爲參數),在這個方法中接收並處理數據.事件

②子組件辦綁定一個自定義事件並將父組件提供的方法做爲事件處理函數

③子組件經過$emit("子組件綁定的事件",data)[每每是寫$emit()寫在子組件裏面一個點擊事件函數裏]觸發子件上綁定的事件,並將要傳遞的數據data做爲參數傳遞到事件函數中

<body>
    <div id="app">
        <child @child-event="getMessage"></child><!--getMessage是父組件中方法,用來處理傳過來的數據,child-event是子組件自定義事件-->
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                getMessage(data){
                    console.log(data)
                }
            },
            components: {
                child:{
                    template:`<div>我是子組件模板展現的內容
                        <button @click="fn">傳輸數據</button>
                        </div>`,
                    methods:{
                        fn(){
                            this.$emit("child-event",18)//點擊事件裏面用$emit()觸發子組件自定義事件並傳遞data
                        }
                    }
                }
            }
        })
    </script>
</body>

4.兄弟組件(或者說任意組件均可以用如下方式通信)

4.1建立一個空Vue實例，也就是一個 bus （事件總線）做爲媒介

4.2誰傳遞數據,誰就使用bus.$emit(事件名稱, 數據)去觸發bus綁定的事件

4.3誰接收數據(接收數據就是爲了處理出書,寫業務代碼),誰就使用bus.$on(事件名稱, () => {})綁定一個事件(每每是自定義事件),並在事件函數中寫業務代碼

<script>
        let bus = new Vue()
        Vue.component("jack",{
            template:`<div>我是jack,我要給rose傳遞數據:
                <button @click="fn">發送數據</button>
                </div>`,
            methods:{
                fn(){ bus.$emit("love","i love you") }
            },
        })
        Vue.component("rose",{
            template:`<div>我是rose,我收到的數據是:
                {{msg}}
                </div>`,
            data(){
                return{
                    msg:""
                }
            },
            created () { bus.$on("love",data=>{
                    //console.log("jack要說的話是,"+data)
                    this.msg=data }) } 
        })
        let vm = new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            mounted () {
                
            }
        })
    </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。